useEffect()
過激派が教える！ useEffectの正しい使い方
依存配列をトリガーに値を更新するのはよくやってしまっている……
そのエフェクトは不要かも – React
useEffect()が要らないケースでuseEffect()を使わずに書き換える例が載ってる
useMemo()で済むパターン
props または state に基づいて state を更新する | そのエフェクトは不要かも – React
重たい計算のキャッシュ | そのエフェクトは不要かも – React
chains-of-computations | そのエフェクトは不要かも – React
useCallback()も併用
特定の条件で値を変えたいとき
React Componentを分け、key (React)でstateをリセットする
resetting-all-state-when-a-prop-changes | そのエフェクトは不要かも – React
まずはこれを検討する
keyを変えると、stateが全てリセットされる
React Componentのstateをリセットするときはkeyを変える
https://ja.react.dev/reference/react/useState#resetting-state-with-a-key
関数Component中に直接setState()を記述する
↑でどうしてもうまくいかないとき使う
adjusting-some-state-when-a-prop-changes | そのエフェクトは不要かも – React
これやってもいいんだtakker.icon
レンダー中にコンポーネントを更新すると、React は返り値の JSX を破棄して、すぐにレンダーを再試行します。
へ～takker.icon
ただし、連鎖的なre-renderを避けるため、React はレンダー中に同じコンポーネントの state を更新することしか許可していない
つまり、親コンポーネントからsetState()を受け取って、子孫コンポーネント内で直接実行するとアウト
useCallback()やEvent Handlerに直接書いて解決するパターン
updating-state-based-on-props-or-state | そのエフェクトは不要かも – React
componentが描画されたことを理由に実行される副作用のみuseEffect()を使う
エフェクトからイベントを分離する – Reactに同様の説明がある
componentの外で処理する
initializing-the-application | そのエフェクトは不要かも – React
useSyncExternalStoreを使う
subscribing-to-an-external-store | そのエフェクトは不要かも – React
notifying-parent-components-about-state-changes | そのエフェクトは不要かも – React
passing-data-to-the-parent | そのエフェクトは不要かも – React
fetching-data | そのエフェクトは不要かも – React
/terrierscript/React Hooks useEffectsチェックリスト
#2024-07-11 09:45:47
#2024-06-18 08:35:02
#2023-08-23 11:55:59