結局 useEffect はいつ使えばいいのか

2024/07/11 116 users React タイミング 開発 目的 経験

useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います... 続きを読む

useEffect: 基礎から使用すべきでない例まで

2024/01/04 215 users effect React レンダリング コンポーネント 基礎

はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む

useEffectをやめて、Suspenseを使おう

2023/05/05 132 users Suspense SWR React データフェッチ SPA

Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹... 続きを読む

過激派が教える！　useEffectの正しい使い方

2023/05/03 214 users React フック 筆者 過激派 要素

ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者... 続きを読む

【React】useEffect は〇〇ではない - Qiita

2022/12/01 14 users Qiita React 挙動 関数 デフォルト

useEffect とは何か、ご存知ですか？ useEffect？ 知ってるよ。 依存配列に入れた値が変更されるたびに関数が実行されるフックでしょ？ これは半分正解ですが、半分間違っています。 useEffect のデフォルトの挙動は「レンダーのたびに毎回実行」です。 依存配列は「変わった時に実行する」というより「変わらなければス... 続きを読む

【保存版】「そのuseEffectの使い方あってる？」と言われる前に

2022/08/10 126 users BAD 公式ドキュメント プロジェクト アプリ 勉強

目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 ... 続きを読む

データフェッチはuseEffectの出番じゃないなら、結局何を使えばいいんだ

2022/07/03 19 users データフェッチ useSyncExternalStore

ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※ useEffect がまったくだめだというわけではありません。 ※ クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような use... 続きを読む

useEffectを使ったデータ取得はベストプラクティスではないです、react-hooks-fetchをお試しあれ

2022/06/25 16 users React ベストプラクティス API 途中 タイミング

useEffectの新しいドキュメントが書かれている途中です。useEffectのタイミングでデータ取得を開始するのは、これまでもベストプラクティスではないと言われていたのですが、React 18のStrict Effectにより再び議論されるようになりました。 今のところ、Reactが提供しているAPIだけですんなり実現する方法はなく、3rd-p... 続きを読む

useEffect()内でsetState()するのを減らすテク

2021/11/07 23 users プレゼンテーションロジック 挙動 テスト メンテナンス 複数

コンポーネント上の useEffect() （or useLayoutEffect()） で複雑なことをすると、deps配列（第2引数）の指定方法などによっては、おかしな挙動を起こしうるのでなるべく避けたいです。何より、テストが面倒なプレゼンテーションロジックは、常にシンプルに保つ方がメンテナンスが容易になります。 複数の useEffect() ... 続きを読む

Next.jsでページ共通の処理をする（useEffectを使う例）

2021/01/25 13 users Middleware TypeScr TSX Nuxt.js

Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScr... 続きを読む

React17におけるuseEffectの破壊的変更を理解する | Zenn

2020/09/19 96 users React Zenn 現行 一方 アップデート

しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17... 続きを読む

useEffectのdeps比較関数をカスタムしたくなったときにやること - uhyo/blog

2020/05/24 11 users uhyo Cou React Blog コンポーネント

Reactにおいて、useEffectなどいくつかのフックは第2引数として依存リストを取ります。 例えばuseEffectの場合、レンダリングの度に依存リストのいずれかの値が前回から変化したかどうかがチェックされ、変化していた場合はレンダリング後にコールバック関数が呼び出されます。 具体例としては、次のコンポーネントはcou... 続きを読む