useEffectってなんで非推奨みたいなこと言われてるの？

useEffectってなんで非推奨みたいなこと言われてるの？フロントエンドカンファレンス関西2025 マグロ/佐々木陽貴

目次 - useEffectって使わない方がいい？ - useEffectとは - 非推奨とされる使い方 - 使うべき場面 -
エフェクトなしでも行ける場面 - まとめ

自己紹介名前:マグロ本名:佐々木陽貴(sasaki haruki) 所属:株式会社くふうカンパニー(24卒サーバーサイド) コメント:7年ぶりの関西でワクワク&今回CfP形式のテックカンファレンス初登壇となります。お手柔らかにお願いします！

useEffectって使わないほうがいい？定期的にSNSや記事に上がってくる「useEffect」使うな。これなんで言われてるかわかります？なんか知らんけど使わない方がいいらしいよそうなんですか？？？せんぱいおれ去年のやりとり

useEffectって使わないほうがいい？定期的にSNSや記事に上がってくる「useEffect」使うな。これなんで言われてるかわかります？ useEffectの役割について振り返りましょう。おれまあちゃんと知っておこうか

useEffectとはコンポーネントを外部システムと同期するためのHooks。

useEffectとはコンポーネントを外部システムと同期するためのHooks。 useEffect(setup, dependencies?) setup: エフェクトのロジックを記述 dependencies: 依存配列。この値が更新されるとsetupが実行される。(省略可) なし:レンダリングごとに実行空配列:初回レンダリングのみ

useEffectとはコンポーネントを外部システムと同期するためのHooks。外部システムの例 - DOM(仮想DOMじゃない実要素) - イベントリスナーやブラウザ API - ネットワーク通信(API
/ WebSocket) - ブラウザのストレージ(localStorage, sessionStorage) - タイマー・スケジューラ - 外部ライブラリ(非 React ベース)

非推奨とされる使い方この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。

非推奨とされる使い方この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。例：propsやstateが更新されたらstateを更新 function Form() { const [firstName, setFirstName] =
useState(’Taylor’); const [lastName, setLastName] = useState(’Swift’); const [fullName, setFullName] = useState(’’); useEffect(() => { setFullName(firstName + ’ ’ + lastName); }, [firstName, lastName]); … } function Form() { const [firstName, setFirstName] = useState(’Taylor’)'; const [lastName, setLastName] = useState(’Swift’); const fullName = firstName + ’ ’ + lastName; … } ダメな例いい例 React公式ドキュメント「そのエフェクトは不要かも」より

非推奨とされる使い方この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。例：propsやstateが更新されたらstateを更新 function Form() { const [firstName, setFirstName] =
useState(’Taylor’); const [lastName, setLastName] = useState(’Swift’); const [fullName, setFullName] = useState(’’); useEffect(() => { setFullName(firstName + ’ ’ + lastName); }, [firstName, lastName]); … } function Form() { const [firstName, setFirstName] = useState(’Taylor’)'; const [lastName, setLastName] = useState(’Swift’); const fullName = firstName + ’ ’ + lastName; … } stateやpropsが更新された時点で処理は再び走るので、わざわざエフェクトとして定義しなくていいいい例ダメな例 React公式ドキュメント「そのエフェクトは不要かも」より

使うべき場面イベントハンドラや実DOMを使う例：他の要素をクリックすると閉じるモーダル

export default function Modal({ isOpen, onClose }) { // modal本体
const modalRef = useRef(null); useEffect(() => { if (!isOpen) return; const handleClickOutside = (e) => { // modalRef の中に含まれていない要素をクリックしたら閉じる if (modalRef.current && !modalRef.current.contains(e.target)) { onClose(); } }; // クリックイベントを window に張る window.addEventListener("mousedown", handleClickOutside); // クリーンアップ return () => { window.removeEventListener("mousedown", handleClickOutside); }; }, [isOpen, onClose]); if (!isOpen) return null; ... }

export default function Modal({ isOpen, onClose }) { // modal本体
const modalRef = useRef(null); useEffect(() => { if (!isOpen) return; const handleClickOutside = (e) => { // modalRef の中に含まれていない要素をクリックしたら閉じる if (modalRef.current && !modalRef.current.contains(e.target)) { onClose(); } }; // クリックイベントを window に張る window.addEventListener("mousedown", handleClickOutside); // クリーンアップ return () => { window.removeEventListener("mousedown", handleClickOutside); }; }, [isOpen, onClose]); if (!isOpen) return null; ... } 実要素のDOMをイベントハンドラで取得するためReactの管轄外になる =useEffectを使う点で適している

使うべき場面データフェッチ例：日付絞り込みの範囲が変わるとフェッチをする

const [posts, setPosts] = useState([]); const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState(""); useEffect(() => { if (!startDate || !endDate) return; const controller = new AborController(); const signal = controller.signal; const fetchPosts = async () => { try { const params = new URLSearchParams({ startDate, endDate, }).toString(); const res = await fetch(`https://api.example.com/posts?${params}`, { signal }); const data = await res.json(); setPosts(data); } catch (error) { console.error("投稿取得エラー:", error); } }; fetchPosts(); return () => { controller.abort() }; }, [startDate, endDate]); // 日付が変わると自動で再取得

const [posts, setPosts] = useState([]); const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState(""); useEffect(() => { if (!startDate || !endDate) return; const controller = new AborController(); const signal = controller.signal; const fetchPosts = async () => { try { const params = new URLSearchParams({ startDate, endDate, }).toString(); const res = await fetch(`https://api.example.com/posts?${params}`, { signal }); const data = await res.json(); setPosts(data); } catch (error) { console.error("投稿取得エラー:", error); } }; fetchPosts(); return () => { controller.abort() }; }, [startDate, endDate]); // 日付が変わると自動で再取得日付が変わると自動で再取得絞り込みの期間を管理フェッチした投稿をセット stateが更新されたので再レンダリング =APIから取得したデータをコンポーネントと同期する

エフェクトなしでも行ける場面じゃあ別に非推奨要素なくない？？ガッツリ使う要素あるやん

エフェクトなしでも行ける場面じゃあ別に非推奨要素なくない？？ →はい　ですが使わなくて済む場面が増えています。まじすか

エフェクトなしでも行ける場面使わない方がいい？ものによるけど、使わなくていいならそれでいい。

エフェクトなしでも行ける場面使わない方がいい？ものによるけど、使わなくていいならそれでいい。例えば - 外部システムを自分で管理しないといけない - 処理が複雑だと、可読性が落ちる - クリーンアップ忘れてメモリリーク
→管理が大変でバグの元になることも管理大変なuseEffectの例

エフェクトなしでも行ける場面モーダル UIライブラリに要件を満たせるものが結構あるので代替えできるのであればそれにすると良い shadcnのDialogとかほぼそれ

エフェクトなしでも行ける場面データフェッチ RSCの登場でサーバー側でフェッチすることが多いクライアント側でフェッチする場合もReactQueryやSWRといった外部ライブラリでフェッチできるケースも増加

import { useState } from "react"; import { useQuery }
from "@tanstack/react-query"; async function fetchPosts({ queryKey }) { const [_key, { startDate, endDate }] = queryKey; const params = new URLSearchParams({ startDate, endDate }).toString(); const res = await fetch(`https://api.example.com/posts?${params}`); return res.json(); } export default function Posts() { const [startDate, setStartDate] = useState(""); const [endDate, setEndDate] = useState(""); // ⭐ React Query が自動でフェッチ & リフェッチしてくれる const { data, isLoading, error } = useQuery({ queryKey: ["posts", { startDate, endDate }], queryFn: fetchPosts, enabled: Boolean(startDate && endDate), // 両方入力されたときだけ実行 }); ... } データフェッチを全て ReactQueryが管理してくれるためエフェクトどころかstateも不要

エフェクトなしでも行ける場面外部ストアのサブスクライブ例：ブラウザの幅が変更された際背景アニメーションが画面幅に依存するケース

import { useSyncExternalStore } from "react"; let cachedSnapshot = {
width: 0, height: 0 }; const cachedServerSnapshot = { width: 0, height: 0 }; function resizeSubscribe(callback: () => void) { window.addEventListener("resize", callback); return () => window.removeEventListener("resize", callback); } function useWindowSize() { const getSnapshot = () => { const width = window.innerWidth; const height = window.innerHeight; if (cachedSnapshot.width !== width || cachedSnapshot.height !== height) { cachedSnapshot = { width, height }; } return cachedSnapshot; }; const getServerSnapshot = () => { return cachedServerSnapshot; }; return useSyncExternalStore(resizeSubscribe, getSnapshot, getServerSnapshot); } export default function Home(){ const { width, height } = useWindowSize(); ... } 幅が変わったらwidth,heightの値も合わせて更新されるまた値が変わるとレンダリングが走る useSyncExternalStoreで幅を管理監視するイベント (今回は画面幅)

うーん難しいね！！！

まとめ - useEffectは外部システムとReactの橋渡しをするもので、非推奨ではない。 - それ以外の用途であれば基本使わずに表現できる。 - 本来使うべきところでもライブラリや他のHooksで解決することもある。 - 基本的に副作用は最終手段として考えよう。 -
とはいえ判断が難しいなら使ってもいいと思う。 - 使っていくうちに副作用であるべきか否かがわかってくるはず。

useEffectってなんで非推奨みたいなこと言われてるの？

useEffectってなんで非推奨みたいなこと言われてるの？

マグロ隊長kinTV

More Decks by マグロ隊長kinTV

Other Decks in Technology

Featured

Transcript