useEffect

Custom Hooks完全ガイド──Reactでロジックを再利用しコンポーネントを超DRY

techgrowup — Mon, 05 May 2025 11:00:00 +0000

はじめに

React 公式チュートリアルでも強調される「コンポーネントは UI を、Hooks はロジックを記述する」という原則。しかし現場のコードベースでは、似たような副作用や状態初期化ロジックを複数コンポーネント間でコピペしてしまうことが珍しくありません。Custom Hook を導入すると、共通処理を 1 箇所でテスト・保守でき、UI コンポーネントは宣言的に保たれます。本記事では公式ドキュメント https://react.dev/learn/reusing-logic-with-custom-hooks をベースに、基礎から高度なパターン、テスト、パフォーマンス、型安全まで徹底解説します。

Custom Hooks の基本構文

import { useState, useEffect } from 'react';

export function useClock() {
  const [time, setTime] = useState(() => new Date());

  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  return time;
}

関数名は use から始める
ビルトイン Hook は通常どおり使用可能
依存配列は呼び出し元コンポーネントではなく、Hook 内部で完結

よくあるアンチパターン: カスタムフックの中で条件付きフック呼び出し

function useWrong(flag) {
  if (flag) {
    // これはルール違反: フックはトップレベルで呼ぶ必要がある
    useEffect(() => console.log('Bad'), []);
  }
}

React のルールオブフックスに違反し、レンダー順序が崩れる可能性があります。必ずトップレベルで呼び、条件分岐は内部で処理を早期リターンするなどで対応しましょう.

事例1: API フェッチロジックの共通化

ネットワーク通信は多くの画面で発生するため、抽象化すると保守負荷が激減します。

import { useState, useEffect } from 'react';

export function useFetch(url, options) {
  const [status, setStatus] = useState('idle');  // idle | loading | success | error
  const [data, setData]   = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false;
    const controller = new AbortController();

    async function start() {
      setStatus('loading');
      try {
        const res = await fetch(url, { ...options, signal: controller.signal });
        if (!res.ok) throw new Error(res.statusText);
        const json = await res.json();
        if (!ignore) {
          setData(json);
          setStatus('success');
        }
      } catch (e) {
        if (!ignore) {
          setError(e);
          setStatus('error');
        }
      }
    }
    start();

    return () => {
      ignore = true;
      controller.abort();
    };
  }, [url, JSON.stringify(options)]);

  return { status, data, error };
}

ポイント解説

AbortController でコンポーネントのアンマウント時にリクエストを中断
依存配列に options がオブジェクトの場合は JSON.stringify で比較簡略化
status を文字列列挙にすることで UI が状態ごとに切り替えやすくなる

事例2: フォーム入力とバリデーション

React Hook Form や Formik を使わずに軽量に済ませたい場合、以下のような useForm フックを自作できます。

export function useForm(initial) {
  const [values, setValues] = useState(initial);
  const [errors, setErrors] = useState({});

  const onChange = (e) => {
    const { name, value } = e.target;
    setValues(v => ({ ...v, [name]: value }));
  };

  const validate = (rules) => {
    const newErrors = {};
    for (const key in rules) {
      const error = rules[key](values[key]);
      if (error) newErrors[key] = error;
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const reset = () => setValues(initial);

  return { values, errors, onChange, validate, reset };
}

使用例

function Signup() {
  const { values, errors, onChange, validate } = useForm({ email: '', pw: '' });

  const handleSubmit = () => {
    if (validate({
      email: v => /@/.test(v) ? '' : 'メールが不正',
      pw: v => v.length >= 8 ? '' : '8文字以上必要'
    })) {
      // 送信
    }
  };
  return (/* JSX */);
}

パフォーマンスとメモ化のベストプラクティス

Custom Hook 内で useMemo や useCallback を使う場面:

計算コストが高いロジックをキャッシュ
子に渡すコールバックを安定参照に
オブジェクトや配列を返す場合—参照が変わると下位ツリーが再レンダー

function usePagination(total, perPage) {
  const pageCount = useMemo(() => Math.ceil(total / perPage), [total, perPage]);
  return pageCount;
}

TypeScriptとの組み合わせ

Custom Hook の戻り値がオブジェクトの場合、ジェネリクスで型の再利用性を高められます。

function useToggle<S extends string>(on: S, off: S) {
  const [state, setState] = useState<S>(off);
  const toggle = () => setState(s => s === on ? off : on);
  return { state, toggle };
}

const { state } = useToggle<'on' | 'off'>('on', 'off');

テスト戦略

@testing-library/react-hooks を用いると、Hook 単体をテストできます。

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('カウンタが増える', () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.inc());
  expect(result.current.count).toBe(1);
});

高度: イベントリスナーを扱う useEventListener フック

DOM イベントを登録・解除するロジックはほぼすべての SPA で必要です。以下の汎用フックをプロジェクトに追加すると、スクロール監視やキー入力検知を簡単に組み込めます。

import { useEffect, useRef } from 'react';

export function useEventListener(type, handler, target = window) {
  const saved = useRef();

  useEffect(() => {
    saved.current = handler;
  }, [handler]);

  useEffect(() => {
    const el = target?.current || target;
    if (!el?.addEventListener) return;
    const listener = (e) => saved.current(e);
    el.addEventListener(type, listener);
    return () => el.removeEventListener(type, listener);
  }, [type, target]);
}

利用例: Escape キーでモーダルを閉じる

function Modal({ onClose }) {
  useEventListener('keydown', e => {
    if (e.key === 'Escape') onClose();
  });
  /* ... */
}

React 18 Concurrent Rendering と Custom Hooks

中断と再実行

並列レンダーではコンポーネントが「途中で止まって再開」される可能性があります。Custom Hook 内で 副作用をレンダーフェーズに書くとバグの温床 になります。

NG: useMemo(() => performSideEffect(), [])
OK : useEffect 内で副作用を実行し、クリーンアップを返す

スケルトン UI の設計

useSuspenseQuery などデータフェッチ Hook を利用するときは、サスペンス発火タイミングを想定しローディングプレースホルダを計画的に配置しましょう。

パフォーマンス計測: React Profiler で Hook のコストを可視化

React DevTools の Profiler タブを開き「Record」
画面操作を実行
Flamegraph または Ranked view で再レンダー時間を検査
Custom Hook 導入前後で差分を比較

重い計算が Commit フェーズに長く表示される場合は useMemo、頻繁なレンダーが Render フェーズに点在する場合は useCallback や React.memo との併用を検討します。

他ライブラリの Custom Hook パターン

TanStack Query: useQuery, useMutation
Redux Toolkit: useSelector, useDispatch
Zustand: useStore(selector)

カスタム Hook のドキュメントとディスカバビリティ

大規模チームでは「どんな Hook があるか分からない」問題が発生します。

命名規約：機能＋動詞 (useFetchUser, useDebouncedValue)
Storybook Docs: Hook 用ストーリを作り動作を可視化
JSDoc/TSDoc と例コードを README に添付

落とし穴と対策一覧

症状	原因	対処
無限ループ	依存配列にオブジェクトリテラル	`useMemo` で固定 or JSON.stringify
stale data	依存配列抜け漏れ	ESLint `exhaustive-deps`
メモリリーク	useEffect 内でクリーンアップ忘れ	必ず return で解除
フックのネスト深すぎ	抽象化不足/責務過多	Hook を小さく分割

いまさら聞けない React ルールオブフックス

トップレベルでのみ呼ぶ
関数コンポーネント or Custom Hook 内で呼ぶ

エラーハンドリング: useSafeAsync フック

function useSafeAsync(fn, deps = []) {
  const mounted = useRef(true);
  useEffect(() => {
    mounted.current = true;
    fn().catch(console.error);
    return () => (mounted.current = false);
  }, deps);
  const safeSet = updater => {
    if (mounted.current) updater();
  };
  return safeSet;
}

フックファクトリパターン

function createUseApi(base) {
  return function useApi(path) {
    return useFetch(base + path);
  };
}
const useGitHub = createUseApi('https://api.github.com');

まとめ

この記事では Custom Hook の意義から実装、型安全、テスト、パフォーマンス、外部 API 連携、アクセシビリティまで幅広く網羅しました。これらのノウハウを活かし、あなたの React プロジェクトを 再利用性が高く、バグが少なく、パフォーマンスに優れた コードベースへ進化させてください。

Reactエフェクトのライフサイクル完全ガイド──useEffectがいつ動く？依存関係・クリーンアップ・タイミングを徹底解説

techgrowup — Sun, 27 Apr 2025 19:00:00 +0000

はじめに

Reactコンポーネントで副作用（データ取得・購読・手動DOM操作等）を扱う際の要がuseEffectフックです。しかし「いつ呼ばれるのか」「どこでクリーンアップすべきか」「依存配列の指定をどう書くべきか」を誤解しやすく、バグや無限ループ、不要な再実行に悩む開発者は少なくありません。本稿ではuseEffectとuseLayoutEffectのライフサイクルを丁寧に紐解き、実践的なコード例とともに解説します。

Reactエフェクトの基本概念

エフェクト（副作用）とは、ReactのUI更新の外側で起きる処理全般を指します。具体例としては：

外部APIからデータを取得する
WebSocketやイベントリスナーを登録・解除する
手動でDOMを操作する（サードパーティライブラリ連携）

useEffectフックは、レンダー後に“副作用”を実行し、必要ならクリーンアップ（解除）も指定できる仕組みです。

import { useEffect } from 'react';

function Example({ url }) {
  useEffect(() => {
    fetch(url).then(r => r.json()).then(data => {
      console.log(data);
    });
  }, [url]);
  return <div>データを取得中…div>;
}

第1引数：エフェクト用コールバック
第2引数：依存配列。中身が変わったときだけ再実行

ライフサイクルフロー全体像

マウント後：最初のレンダーが完了した直後に実行
更新後：依存配列の値が前回と異なるとレンダー後に再実行
アンマウント前：前回のエフェクトで返したクリーンアップ関数を実行
依存配列なし：マウント後のみ実行、更新時には再実行されない
依存配列を省略：レンダーごとに実行し、旧エフェクトは都度クリーンアップ

以下、各ステップを深掘りします。

マウント後の初回実行

useEffect(fn, deps) は マウント直後 にまず実行されます。DOMが構築された後なので、document.getElementById など直接DOM操作しても正しく参照できるタイミングです。

function InitLogger() {
  useEffect(() => {
    console.log('コンポーネントが画面に追加されました');
  }, []); // 依存配列空でマウント後のみ
  return <div>初期化ログを出力div>;
}

依存配列を空にすると、初回レンダー後だけに限定
一度きりのサブスクリプションやログに最適

依存配列による再実行制御

依存配列 ([a, b, …]) に指定した値が前回と異なる場合、更新後に再実行されます。

function Fetcher({ userId }) {
  const [profile, setProfile] = useState(null);
  useEffect(() => {
    let active = true;
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        if (active) setProfile(data);
      });
    return () => { active = false }; // クリーンアップ
  }, [userId]); 
  // userIdが変わるたびに実行／前回のフェッチはキャンセル
  return profile ? <UserCard data={profile} /> : <p>読み込み中…p>;
}

古いフェッチ結果を書き込まないためのフラグ制御
依存の追加漏れが無限ループや stale closure を招く

クリーンアップ関数の重要性

エフェクト内で何らかの購読（Subscription）やタイマーを登録した場合、コンポーネントの破棄前に必ず解除する必要があります。useEffectのコールバックが返す関数がクリーンアップに該当します。

function Clock() {
  const [time, setTime] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setTime(Date.now()), 1000);
    return () => clearInterval(id); // アンマウント時に解除
  }, []);
  return <div>現在時刻：{new Date(time).toLocaleTimeString()}div>;
}

クリーンアップがないと、メモリリークや不要なタイマーが残り続ける
レンダーごとに再登録してしまう実装ミスにも注意

`useLayoutEffect`と`useEffect`の違い

useEffect：レンダー後に非同期的に実行される
useLayoutEffect：レンダー直後、ブラウザの描画前に同期的に実行される

レイアウトやサイズ計算をDOMに対して行う場合は、レイアウトズレを防ぐために useLayoutEffect を使います。それ以外は通常の useEffect を優先しましょう。

import { useLayoutEffect, useRef } from 'react';

function MeasureBox() {
  const ref = useRef();
  useLayoutEffect(() => {
    console.log(ref.current.getBoundingClientRect());
  }, []);
  return <div ref={ref}>サイズを測定div>;
}

副次的レンダーとスケジューリング

React 18では厳格モード（Strict Mode）使用時に、開発中の副作用が2回実行される仕様があります。これは初回マウント→アンマウント→再マウントの動きを通して、クリーンアップ漏れを早期に検出するためです。本番ビルドでは1回だけ実行されますが、開発体験向上のため注意して実装しましょう。

パフォーマンス最適化パターン

依存配列の最小化
不要な変数を入れると再実行が多発。逆に入れ忘れると stale data の原因。
useCallback / useMemo
エフェクト中で関数や計算結果を依存させる場合はメモ化して参照の安定化を図る。
サブスクリプション分離
複数の副作用を一つの useEffect にまとめず、責務ごとに分けると、不要な再実行を抑えやすい。

useEffect(() => { /* データ取得 */ }, [id]);
useEffect(() => { /* 購読登録 */ }, [socket]);

よくある落とし穴と対策

症状	原因	対策
無限ループ	依存配列に頻繁に変わる値が含まれる	必要最小限の依存に絞る
クリーンアップ漏れ	return を忘れた	購読/タイマーは必ず return で解除
stale closure（古い状態を参照）	クロージャ内で古い変数を直接参照	依存配列に必要な値をすべて含める、またはフラグ制御
レンダリング前の計測ずれ	useEffectでDOM計測	useLayoutEffectに移行

実践例：データフェッチ×キャンセルパターン

import { useState, useEffect } from 'react';

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
      .then(r => r.json())
      .then(setResults)
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });
    return () => controller.abort(); // クエリ変更時・アンマウント時に中断
  }, [query]);
  return (
    <ul>
      {results.map(r => <li key={r.id}>{r.title}li>)}
    ul>
  );
}

まとめ

Reactの副作用ライフサイクルを正しく理解すると、UI更新と非同期処理、リソース管理がスムーズになります。useEffectとuseLayoutEffectの使い分け、依存配列の設計、クリーンアップの徹底、パフォーマンス最適化パターンをマスターし、副作用バグから解放された堅牢なコンポーネントを開発しましょう。

Reactコンポーネント徹底ガイド──基本から応用パターンまでわかりやすく解説

techgrowup — Sun, 27 Apr 2025 18:00:00 +0000

はじめに

Reactを初めて学ぶ人が最初につまづきやすいのが「コンポーネント」の概念です。コンポーネントはUIを部品化し、再利用可能な塊として扱う手法。公式ドキュメント（https://react.dev/learn#components）では「コンポーネントは関数と同じ」と説明していますが、実際にコードを書くときにはPropsやState、Hooksと組み合わせるため、学習のハードルが高く感じられることもあります。本記事ではReact 18+最新情報を交え、関数コンポーネント、クラスコンポーネント、Props、State、Hooks、コンポジションや最適化パターンまで丁寧に解説します。

コンポーネントとは何か

コンポーネントは「UI部品」のようなもので、HTMLとJavaScriptを一体化して定義できます。例えば「ボタン」や「入力フォーム」のようなパーツを1つのファイルとして切り出し、他の箇所から呼び出して使い回せるのが最大の利点です。

// Button.jsx
export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}button>;
}

上記のように、Button コンポーネントを定義し、label や onClick をPropsで受け取ることで、使う場所ごとに見た目や挙動を変えられます。

関数コンポーネントの基礎

宣言方法

関数コンポーネントはJavaScriptの関数として定義し、必ず1つのJSX要素を返します。

function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！h1>;
}

ESLintやTypeScript環境では React.FC 型を使って型注釈を付けるケースもあります。

Propsの受け渡し

Propsはコンポーネントを呼び出す側で指定します。

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

<Greeting name="太郎" />
<Greeting name="花子" />

複数のPropsを使う場合はオブジェクト形式でまとめて受け取り、分割代入で取り出します。

function Profile({ avatarUrl, username, bio }) { /* … */ }

クラスコンポーネントとの違い

かつてReactはクラスコンポーネントが主流でした。2025年現在はHooksの登場で関数コンポーネントが主役ですが、既存コードやライフサイクルメソッドの学習に役立つため、基本を抑えておくと理解が深まります。

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>こんにちは、{this.props.name}さん！h1>;
  }
}

State管理：クラスでは this.state と this.setState()
ライフサイクル：componentDidMount, componentDidUpdate, componentWillUnmount

Hooksを使えば同等の処理が関数コンポーネントで実現可能です。

Stateの扱い方

useStateフック

Stateは「変化する値」を保持し、再レンダーを引き起こす仕組みです。関数コンポーネントでは useState を使って簡単にStateを定義できます。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>現在のカウント: {count}p>
      <button onClick={() => setCount(count + 1)}>増やすbutton>
    
  );
}

初期値：useState(0) の 0 部分
更新関数：setCount を呼ぶと再レンダーが発生

Stateの注意点

不変性：Stateオブジェクトを直接変更せず、必ず更新関数を使う
遅延初期化：複雑な計算が必要な場合は関数を渡して一度だけ実行

const [todos, setTodos] = useState(() => loadTodosFromLocalStorage());

Props vs State

項目	Props	State
定義場所	親コンポーネントが渡す	自身のコンポーネント内で定義
役割	親からの読み取り専用の値	パーツ内部で変化する値
更新	親が再レンダーされる必要あり	更新関数を呼ぶだけで自動的に再レンダー

Propsを変更したい場合は「親コンポーネント」が再レンダーされて新しいPropsを渡す仕組みになります。

コンポーネントの合成（Composition）

Reactではコンポジションが主流で、親子や兄弟のようにコンポーネントを入れ子にして機能を組み立てます。

{children}

; } function App() { return (

タイトル

内容テキスト

); }" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">

function Card({ children }) {
  return <div className="card">{children}div>;
}

function App() {
  return (
    <Card>
      <h2>タイトルh2>
      <p>内容テキストp>
    Card>
  );
}

children：… の中身を受け取る特殊Props
再利用性：見た目のフレームと中身を分離できるため、多用途に使える

ライフサイクルとuseEffect

useEffectの基本

副作用（データフェッチ、購読、手動DOM操作など）を扱う際に使うフック。

import { useEffect, useState } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(json => setData(json));
  }, [url]); // urlが変わったときだけ再実行
  return data ? <pre>{JSON.stringify(data)}pre> : <p>読み込み中…p>;
}

第2引数：依存配列。空配列 [] ならマウント時のみ実行
クリーンアップ：関数を返すとアンマウント時に実行

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

クラスのライフサイクル対応

componentDidMount → useEffect(() => {...}, [])
componentDidUpdate → useEffect(() => {...}, [deps])
componentWillUnmount → useEffect(() => { return cleanup }, [])

パフォーマンス最適化

React.memo

関数コンポーネントをラップして、Propsが変わらない限り再レンダーを防ぐ。

const ExpensiveComponent = React.memo(function({ value }) {
  // 重い計算...
  return <span>{value}span>;
});

useCallback / useMemo

useCallback：コールバック関数をメモ化

const handleClick = useCallback(() => { /* ... */ }, [deps]);

useMemo：計算結果をメモ化

const result = useMemo(() => expensiveCalculation(a, b), [a, b]);

Virtualized List

大量データをリスト表示する場合は react-window や react-virtualized を使って、可視領域のみDOM生成する。

コンポーネント設計パターン

Container / Presentational

Container：データ取得やState管理を担当
Presentational：UI描画のみを担当

function UserContainer() {
  const [user, setUser] = useState(null);
  useEffect(() => fetchUser().then(setUser), []);
  return user ? <UserProfile data={user} /> : <Loading />;
}
function UserProfile({ data }) { /* UIのみ */ }

Compound Components

親コンポーネントと子要素が連携して振る舞うパターン。

function Tabs({ children }) {
  const [active, setActive] = useState(0);
  return /* contextでactiveとsetActiveを渡す */;
}
Tabs.List = function({ children }) { /* タブ見出し */ };
Tabs.Panel = function({ index, children }) { /* コンテンツ */ };

テストと型安全

テスト例（React Testing Library）

import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('クリックで増加', () => {
  const { getByText } = render(<Counter />);
  const btn = getByText(/増やす/);
  fireEvent.click(btn);
  expect(getByText(/現在のカウント: 1/)).toBeInTheDocument();
});

TypeScriptとの併用

コンポーネントに型注釈を付けると、Propsのうっかりミスをコンパイル時に検出できます。

interface ButtonProps { label: string; onClick: () => void; }
export function Button({ label, onClick }: ButtonProps) { /* ... */ }

まとめ

Reactコンポーネントは「UIを部品化して組み合わせる」ための基本単位です。関数コンポーネントとクラスコンポーネントの違い、PropsとState、Hooks、コンポジション、最適化パターンをしっかり理解すれば、堅牢で再利用性の高いUIを効率的に開発できます。公式ドキュメントを自分のプロジェクトに落とし込む際には、ここで解説した多彩なパターンをぜひ試してみてください。

useEffect

Custom Hooks完全ガイド──Reactでロジックを再利用しコンポーネントを超DRY

はじめに

Custom Hooks の基本構文

よくあるアンチパターン: カスタムフックの中で条件付きフック呼び出し

事例1: API フェッチロジックの共通化

ポイント解説

事例2: フォーム入力とバリデーション

使用例

パフォーマンスとメモ化のベストプラクティス

TypeScriptとの組み合わせ

テスト戦略

高度: イベントリスナーを扱う useEventListener フック

利用例: Escape キーでモーダルを閉じる

React 18 Concurrent Rendering と Custom Hooks

中断と再実行

スケルトン UI の設計

パフォーマンス計測: React Profiler で Hook のコストを可視化

他ライブラリの Custom Hook パターン

カスタム Hook のドキュメントとディスカバビリティ

落とし穴と対策一覧

いまさら聞けない React ルールオブフックス

エラーハンドリング: useSafeAsync フック

フックファクトリパターン

まとめ

Reactエフェクトのライフサイクル完全ガイド──useEffectがいつ動く？依存関係・クリーンアップ・タイミングを徹底解説

はじめに

Reactエフェクトの基本概念

ライフサイクルフロー全体像

マウント後の初回実行

依存配列による再実行制御

クリーンアップ関数の重要性

useLayoutEffectとuseEffectの違い

副次的レンダーとスケジューリング

パフォーマンス最適化パターン

よくある落とし穴と対策

実践例：データフェッチ×キャンセルパターン

まとめ

Reactコンポーネント徹底ガイド──基本から応用パターンまでわかりやすく解説

はじめに

コンポーネントとは何か

関数コンポーネントの基礎

宣言方法

Propsの受け渡し

クラスコンポーネントとの違い

Stateの扱い方

useStateフック

Stateの注意点

Props vs State

コンポーネントの合成（Composition）

タイトル

ライフサイクルとuseEffect

useEffectの基本

クラスのライフサイクル対応

パフォーマンス最適化

React.memo

useCallback / useMemo

Virtualized List

コンポーネント設計パターン

Container / Presentational

Compound Components

テストと型安全

テスト例（React Testing Library）

TypeScriptとの併用

まとめ

`useLayoutEffect`と`useEffect`の違い