[解決済み] useMemo vs. useEffect + useState

質問

を使用するメリットはありますか？ useMemo を組み合わせて使うのではなく (たとえば集中的に関数を呼び出す場合) useEffect と useState ?

以下は、一見してまったく同じように動作する2つのカスタムフックですが、他に useMemo の戻り値は null を最初のレンダリングで実行します。

useEffect & useState（ユースエフェクト＆ユースステート

import { expensiveCalculation } from "foo";

function useCalculate(someNumber: number): number {
  const [result, setResult] = useState<number>(null);

  useEffect(() => {
    setResult(expensiveCalculation(someNumber));
  }, [someNumber]);

  return result;
}

使用メモ

import { expensiveCalculation } from "foo";

function useCalculateWithMemo(someNumber: number): number {
    return useMemo(() => {
        return expensiveCalculation(someNumber);
    }, [someNumber]);
};

どちらもパラメータ someNumber が変更された場合、そのメモ書きは useMemo を蹴っているのでしょうか？

解決方法は？

その useEffect と setState 最初のレンダリングは古いデータで遅延し、その後すぐに新しいデータで追加のレンダリングがキューに入れられます。

があるとします。

function expensiveCalculation(x) { return x + 1; }; // Maybe I'm running this on a literal potato

仮に someNumber は初期状態では0です。

• は useMemo を直ちにレンダリングします。 1 .
• は useEffect のバージョンでレンダリングします。 null そして、コンポーネントがレンダリングした後にエフェクトを実行し、状態を変更し、新しいレンダリングを 1 .

そして、もし someNumber を 2 に変更します。

• は useMemo が実行され 3 がレンダリングされます。
• は useEffect バージョンが実行され、レンダリング 1 の正しい値でコンポーネントを再実行します。 3 .

頻度という点では expensiveCalculation が実行されると、両者は同じ挙動を示しますが useEffect の場合、2 倍のレンダリングが発生し、他の理由も含めてパフォーマンスに悪影響があります。

さらに useMemo の方がよりクリーンで読みやすいと思います。 不必要なミュータブルステートを導入しないし、可動部品も少ない。

ということは useMemo ここで