ホームページ  >  記事  >  ウェブフロントエンド  >  意外と知られていない useState パフォーマンスのヒント

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-30 23:50:29257ブラウズ

A useState performance tip you may not have known

内部に 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。