ReactJs Performance ~React Compiler~

React 19 introduced the React Compiler to optimize components without useMemo or useCallback.

Before

const Component = ({ datas}) => {

  const memoizedDatas= useMemo(() => {
    return datas.map(item => format(item));
  }, [datas]);

  const handleOnClick = useCallback(() => {
    doSomething(memoizedDatas);
  }, [memoizedDatas]);

  return <div onClick={handleOnClick}>{memoizedDatas.map(data => data.item)}</div>;
};

After

const Component = ({ datas}) => {

  const memoizedDatas= datas.map(item => format(item));

  const handleOnClick= () => {
    doSomething(memoizedDatas);
  };

  return <div onClick={handleOnClick}>{memoizedDatas.map(data => data.item)}</div>;
};