Open4
React - 避難ハッチを読む
tanakakc
避難ハッチ = 頻繁には使わないもの。使い所を理解しておく必要がある
tanakakc
- refはコンポーネントの変数のようなもの
- refは再レンダーされても値を保持する（普通のローカル変数は再レンダーで値がリセットされる）
- refを変更しても再レンダーはトリガされない
- レンダーに使用しない値を保持するべき
- refの一般的な使用例はレンダーされたDOM操作
- 再レンダーをせずに今表示されているDOMを操作できる
- 基本的には非破壊的な操作のみを行うようにする
tanakakc
- エフェクトはレンダー自体（クリックや入力などのイベントではなく）によって引き起こされる処理を書くもの
- エフェクトはReactによってDOMがコミットされた後に実行される
- 「エフェクトはおそらく不要なもの」（避難ハッチ）って書いてるので、基本的にはすぐに使わないようにする
- エフェクトはレンダーごとに実行される（依存値が変更されていない場合は実行しない）
- エフェクトは次回のエフェクト実行時とアンマウント時にクリーンアップ関数を実行する
- クリーンアップ関数は
useEffect(() => { return(() => ...) }, [variable])のようにuseEffectの処理内で関数をreturnする形で定義できる - レンダーのためのデータ加工をエフェクトに書く必要はない
- ユーザーイベントの処理にエフェクトは必要ない
tanakakcその他メモ
- 開発環境ではReactはバグの検知を助けるためにレンダー後にDOMを再マウントする(strictmodeの場合)
- Next.jsでは13系からデフォルトでstrict modeはtrue