useEffectってなんで非推奨みたいなこと言われてるの？フロントエンドカンファレンス関西2025の登壇資料です。 https://fortee.jp/fec-kansai-2025
自己補正するコンポーネント: レンダリング中に状態更新する公式テクニックの解釈
Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。 この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。 このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReactのデザインに完璧に則っているというのがReactの公式ドキュメントの特徴です。技術に対する向き合い方として、公式の説明であっても妄信せず批判的に見ることはとても重要です。しかし、Reactの場合は最終的に
エフェクトイベント関数はuseEffectのdepsに"入れてはならない" - Panda Noir
depsに入れなくて良い、ではなく、入れてはならない です。 エフェクトイベント関数をdepsに入れるとレンダリング毎にエフェクトが走る useEffectEventは レンダリングごとに新しい関数を返します (検証用デモ)。 そのため、useEffect の deps にエフェクトイベントを含めると毎回エフェクトが実行されます(時にはこれによって 無限ループが起きます ) const effectEventFn = useEffectEvent(callback); // レンダリングのたびに新しい関数が返される useEffect(() => { return listen(effectEventFn); }, [effectEventFn]); // ❌ effectEventFn が入っているので毎回実行される!! なので、depsにeffectEventFnを入れてはいけません。
React useEffectの46%が不要だった事実 - izanami
Meta社が「useEffectの46%は不要だった」という調査結果を発表。それを知った私が、自分のコードを見直してuseEffectを減らしていった体験談。連鎖するuseEffectでデバッグに苦労した経験から、どうやって改善していったかを共有。 useEffectを使いすぎてた私がMeta社の調査結果を見て反省した話 こんにちは。とちです。 Reactで開発していて、「useEffect書きすぎかも…」と感じたことはありませんか？私はしょっちゅうありました。 そんな中、Meta社（旧Facebook）が自社のコードベースを調査したら、useEffectの約46%が実は不要だったという調査結果を知って、かなり衝撃を受けました。 この記事では、私がuseEffectを使いすぎていた理由を反省しつつ、どうやって減らしていったかを共有します。 React公式ガイドライン：useEffectは「
useEffectにはコメントをつけよう - Panda Noir
「なにがしたいか」をベースにコメントをつけておくと、後で読むときのコストが下がりやすい。 実際にプロダクトコードで書いたことがあるコメント↓ (簡略化してます) // 画面内に入った動画を自動再生する+ほかの動画は停止する (すでに再生済みだったら再生しない) useEffect(() => { if (inView && !hasBeenPlayed && canAutoplay) { /* ... */ pauseOtherVideo(); play(); } /* ... */ }); このコンポーネントにはコレを含めて4つのコメント付きのuseEffectがあった。たびたび読み返す機会があったが、その度にこれらのコメントが大いに役立った。 なぜコメントが必要なのか? useEffectの中身はたいてい複雑な処理になる。しかもたいてい無名関数を渡すので、実現したい仕様に関する情報がな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
