• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React

React/再レンダリング

Top / React / 再レンダリング

条件

stateが更新

• ステートの変更を反映

propsが変更

• 引数として渡されたpropsの変更を反映

再レンダリングされたコンポーネント配下のコンポーネント全て

• 子コンポーネントはpropsが変更されていなくても再レンダリングされる

React/最適化

React/メモ化

• 前回の処理結果を保持しておく

コンポーネントのメモ化 (React.memo)

• propsに変更がない限り再レンダリングされなくなる
• 関数コンポーネント全体をmemoで囲う

  export const App = () => {...};
  export const App = memo(() => {...}));

関数のメモ化 (useCallback)

• コンポーネントをメモ化していても、propsで関数を渡しているとレンダリングの度にコンポーネントの処理時が実行されることにより関数が再生成され、再レンダリングされてしまう
• →useCallbackを使い関数のメモ化を行う

useCallback

• const onClick = useCallback(() => {}, [])

• 引数
  • 第1引数:関数
  • 第2引数:依存配列
    • 空の場合、最初に生成された関数が再利用される
    • 依存配列が変更されるたびに関数が再生成される

変数のメモ化 (useMemo)

• 使用頻度はmemoやuseCallback程は高くない

  const num = useMemo(() => {}, [])

• 引数
  • 第1引数:関数
  • 第2引数:依存配列
    • 空の場合、最初に生成された値が再利用される
    • 依存配列が変更されるたびに値が再計算される