react-use-effectlisted

# useEffectの使いどころを見極める `useEffect`は外部システム(ブラウザAPI、ネットワーク、サードパーティライブラリ)との同期にのみ使います。 それ以外の用途では、より適切な代替手段がないか検討してください。 参考: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect) ## useEffectを使わずに解決するパターン ### レンダリング用のデータ変換は直接計算します ```tsx // Bad: useEffectでstateを更新 const [fullName, setFullName] = useState(""); useEffect(() => { setFullName(firstName + " " + lastName); }, [firstName, lastName]); // Good: レンダリング中に計算 const fullName = firstName + " " + lastName; ``` ### ユーザー操作の処理はイベントハンドラで行います ```tsx // Bad: useEffectで副作用を検知 useEffect(() => { if (product.isInCart) { showNotification(`Added ${product.name} to cart!`); } }, [product]); // Good: イベントハンドラで直接処理 function handleBuyClick() { addToCart(product); showNotification(`Added ${product.name} to cart!`); } ``` ### propsが変わったときの状態リセットにはkeyを使います ```tsx // Bad: useEffectでリセット useEffect(() => { setComment(""); }, [userId]); // Good: keyでコンポーネントを再マウント <Profile userId={userId} key={userId} />; ``` ### 高コストな計算のキャッシュにはuseMemoを使います ```tsx // Bad: useEffectで計算結果をstateに保存 useEffect(() => { setFilteredTodos(getFilteredTodos(todos, filter)); }, [todos, filter]); // Good: useMemoでキャッシュ const filteredTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]); ``` ### データ取得にはデータフェッチライブラリを使います ```tsx // Bad: useEffectで手動フェッチ(冗長なボイラープレート、キャッシュなし、重複排除なし) useEffect(() => { let ignore = false; fetchData(id).then((data) => { if (!ignore) setData(data); }); return () =