ちゃんとuseMemo使おう

はじめに

ちゃんとuseMemo使ってますか？
propsで渡された数値を足すだけの簡単なコンポーネントを作って見ていきましょう。

悪い例

関数で直接取得

const Component = ({num1,num2}) => {
  const sum = () => num1 + num2
  render(
    <div>{sum()}</div>
  );
}

これだと、レンダリングごとにnum1+num2の処理が実行されます。
今回は簡単な処理ですが、これが複雑な処理になるとパフォーマンスが悪くなります。

useEffectを使う

const Component = ({num1,num2}) => {
  const [sum, setSum] = useState(0);
  useEffect(() => {
    setSum(num1 + num2);
  },[num1,num2]);
  render(
    <div>{sum}</div>
  );
}

わかりにくい

useMemoを使う

const Component = ({num1,num2}) => {
  const sum = useMemo(() => num1 + num2,[num1 , num2]);
  render(
    <div>{sum}</div>
  );
}

これで、num1 + num2はmount時とnum1 num2が変更された時のみ実行されます。
しかも、わかりやすい。