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

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

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

【useEffect】初回にも実行されて困るなら《何をキッカケに、どう更新されるか》を見直せ - Qiita

2024/06/28 7 users Qiita きっかけ 初回 初期値 疑問

useEffect を使って「初回以外の再レンダリング時に実行される処理」を書くにはどうすれば良いのか？ という疑問を、たまに目にします。 たとえば、以下のような仕様の、「商品価格を編集する画面」を作ることを考えてみましょう。 日本での販売価格入力 ページ読み込み時には初期値が入っている アメリカでの販売価格入... 続きを読む

なぜ document.title = 'title' は useEffect でラップする必要があるのか

2024/03/13 9 users クリーンアップ レンダリング title エフェクト 結論

答え(結論): レンダリングとエフェクトを分離するため クリーンアップを設定するため useEffect でラップする意味ってなくない? 以下の2つのコードはどちらもレンダリングすると Hello world と表示され、ページタイトルが Hello world になります。 const App1 = () => { useEffect(() => { document.title = 'Hello wo... 続きを読む

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

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

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

useEffectEvent フックを使って useEffect ともっと上手く付き合おう

2023/12/29 9 users フック ご存知 概要 使い方 紹介

useEffectEvent という react フックをご存知ですか? まだ experimental なので、知らない方も多いと思います。しかし、このフックは 「なんで今までなかったんだろう?」と思ってしまうほど革新的 です。今回はその使い方の紹介などをします。 概要: useEffectEvent は useEffect とともに使うフック まず概要ですが、us... 続きを読む

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

2023/02/20 5 users Qiita React Props state パク

はじめに 最近、周囲から「useEffectでバグった」という声を聞くことが増えました。そこで、今までなんとなくで使っていた useEffect とは何かを正しく理解したいと思い記事を書くに至りました。 この記事はReactの再レンダリングの仕組み(propsやstateが変更される度に再レンダリングされる)を理解している方向けです。... 続きを読む

【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... 続きを読む