Slide 1
Slide 1 text
useEffectってなんで非推奨みた
いなこと言われてるの？
フロントエンドカンファレンス関西2025
マグロ/佐々木陽貴
Slide 2
Slide 2 text
目次
- useEffectって使わない方がいい？
- useEffectとは
- 非推奨とされる使い方
- 使うべき場面
- エフェクトなしでも行ける場面
- まとめ
Slide 3
Slide 3 text
自己紹介
名前:マグロ
本名:佐々木陽貴(sasaki haruki)
所属:株式会社くふうカンパニー(24卒サーバーサイド)
コメント:7年ぶりの関西でワクワク&今回CfP形式のテックカン
ファレンス初登壇となります。お手柔らかにお願いします！
Slide 4
Slide 4 text
useEffectって使わないほうがいい？
定期的にSNSや記事に上がってくる「useEffect」使うな。
これなんで言われてるかわかります？
なんか知らんけど使わな
い方がいいらしいよ
そうなんですか？？？
せんぱい
おれ 去年のやりとり
Slide 5
Slide 5 text
useEffectって使わないほうがいい？
定期的にSNSや記事に上がってくる「useEffect」使うな。
これなんで言われてるかわかります？
useEffectの役割について振り返りましょう。
おれ
まあちゃんと知っておこうか
Slide 6
Slide 6 text
useEffectとは
コンポーネントを外部システムと同期するためのHooks。
Slide 7
Slide 7 text
useEffectとは
コンポーネントを外部システムと同期するためのHooks。
useEffect(setup, dependencies?)
setup: エフェクトのロジックを記述
dependencies: 依存配列。この値が更新されるとsetupが実行される。(省略可)
なし:レンダリングごとに実行
空配列:初回レンダリングのみ
Slide 8
Slide 8 text
useEffectとは
コンポーネントを外部システムと同期するためのHooks。
外部システムの例
- DOM(仮想DOMじゃない実要素)
- イベントリスナーやブラウザ API
- ネットワーク通信(API / WebSocket)
- ブラウザのストレージ(localStorage, sessionStorage)
- タイマー・スケジューラ
- 外部ライブラリ(非 React ベース)
Slide 9
Slide 9 text
非推奨とされる使い方
この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。
Slide 10
Slide 10 text
非推奨とされる使い方
この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。
例：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公式ドキュメント「そのエフェクトは不要かも」より
Slide 11
Slide 11 text
非推奨とされる使い方
この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。
例：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公式ドキュメント「そのエフェクトは不要かも」より
Slide 12
Slide 12 text
使うべき場面
イベントハンドラや実DOMを使う
例：他の要素をクリックすると閉じるモーダル
Slide 13
Slide 13 text
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;
...
}
Slide 14
Slide 14 text
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を使う点で適している
Slide 15
Slide 15 text
使うべき場面
データフェッチ
例：日付絞り込みの範囲が変わるとフェッチをする
Slide 16
Slide 16 text
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]); // 日付が変わると自動で再取得
Slide 17
Slide 17 text
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から取得したデータをコンポー
ネントと同期する
Slide 18
Slide 18 text
エフェクトなしでも行ける場面
じゃあ別に非推奨要素なくない？？
ガッツリ使う要素あるやん
Slide 19
Slide 19 text
エフェクトなしでも行ける場面
じゃあ別に非推奨要素なくない？？
→はい
ですが使わなくて済む場面が増えています。
まじすか
Slide 20
Slide 20 text
エフェクトなしでも行ける場面
使わない方がいい？
ものによるけど、使わなくていいならそれでいい。
Slide 21
Slide 21 text
エフェクトなしでも行ける場面
使わない方がいい？
ものによるけど、使わなくていいならそれでいい。
例えば
- 外部システムを自分で管理しないといけない
- 処理が複雑だと、可読性が落ちる
- クリーンアップ忘れてメモリリーク
→管理が大変でバグの元になることも
管理大変なuseEffectの例
Slide 22
Slide 22 text
エフェクトなしでも行ける場面
モーダル
UIライブラリに要件を満たせるものが結構あるので代替えできるのであればそれにする
と良い
shadcnのDialogとかほぼそれ
Slide 23
Slide 23 text
エフェクトなしでも行ける場面
データフェッチ
RSCの登場でサーバー側でフェッチすることが多い
クライアント側でフェッチする場合もReactQueryやSWRといった外部ライブラリでフェッ
チできるケースも増加
Slide 24
Slide 24 text
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も不要
Slide 25
Slide 25 text
エフェクトなしでも行ける場面
外部ストアのサブスクライブ
例：ブラウザの幅が変更された際
背景アニメーションが画面幅に依存するケース
Slide 26
Slide 26 text
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で幅を管理
監視するイベント
(今回は画面幅)
Slide 27
Slide 27 text
うーん
難しいね！！！
Slide 28
Slide 28 text
まとめ
- useEffectは外部システムとReactの橋渡しをするもので、非推奨ではない。
- それ以外の用途であれば基本使わずに表現できる。
- 本来使うべきところでもライブラリや他のHooksで解決することもある。
- 基本的に副作用は最終手段として考えよう。
- とはいえ判断が難しいなら使ってもいいと思う。
- 使っていくうちに副作用であるべきか否かがわかってくるはず。