意外と知られていない useState パフォーマンスのヒント

内部に useState を持つ React コンポーネントがあるとします。

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation())

    return (
      // ...
    );
  }

高価な計算関数の結果を使用して状態を開始します。
コンポーネントが再レンダリングされるたびに、useState の初期値としてその結果のみが必要な場合でも、関数 PriceCalculation が実行されます。関数の結果は使用されません。

再レンダリング中の負荷の高い計算を回避するには、関数を呼び出さずに関数自体を渡します。 React は、レンダリングごとではなく、マウント時に関数自体を呼び出すことができるほど賢いです。

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation)

    return (
      // ...
    );
  }

以上が意外と知られていない useState パフォーマンスのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。