↓ メインコンテンツへスキップ
Background Image

React Hooks 完全ガイド：入門から精通まで

·374 文字·2 分· loading · loading · ·
フロントエンド開発 React React Hooks JavaScript フロントエンド開発
目次

🎯 React Hooksとは？
#

React HooksはReact 16.8で導入された新機能で、classコンポーネントを書くことなく、関数コンポーネントで状態やその他のReact機能を使用できるようにします。Hooksにより関数コンポーネントがより強力で柔軟になります。

🪝 基本Hooks
#

✨ Hooksの利点
#

  • コードの簡素化: ボイラープレートコードの削減、可読性の向上
  • ロジックの再利用: コンポーネント間でのロジック共有が容易
  • 学習コスト: classコンポーネントの複雑な概念を理解する必要がない
  • パフォーマンス最適化: より良いtree-shakingとコード分割

🪝 基本Hooks
#

1. useState - 状態管理
#

useStateは最も基本的なHookで、関数コンポーネントに状態を追加するために使用されます。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        増加
      </button>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前を入力"
      />
    </div>
  );
}

関数型更新
#

// 推奨：関数型更新の使用
setCount(prevCount => prevCount + 1);

// 避けるべき：現在値の直接使用
setCount(count + 1);

2. useEffect - 副作用処理
#

useEffectは、データ取得、サブスクリプション、DOMの手動変更など、コンポーネント内の副作用を処理するために使用されます。

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('ユーザー情報の取得に失敗:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]); // 依存配列

  if (loading) return <div>読み込み中...</div>;
  if (!user) return <div>ユーザーが存在しません</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

🚀 カスタムHooks
#

カスタムHookの作成
#

カスタムHookは、コンポーネント間でロジックを共有するための強力な方法です。

// useLocalStorage.js
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

💡 ベストプラクティス
#

1. Hooksのルール
#

  • トップレベルでのみHooksを呼び出す
  • ループ、条件、ネストした関数内でHooksを呼び出さない
  • React関数コンポーネントまたはカスタムHook内でのみHooksを呼び出す

2. パフォーマンス最適化
#

  • useCallbackとuseMemoを適切に使用
  • 依存配列を正確に設定
  • 不要な再レンダリングを避ける

🔧 よくある問題と解決策
#

1. 無限ループ
#

// 問題のあるコード
useEffect(() => {
  setCount(count + 1);
}, [count]); // 無限ループ

// 解決策
useEffect(() => {
  setCount(prevCount => prevCount + 1);
}, []); // 空の依存配列

2. 古いクロージャ
#

// 問題のあるコード
useEffect(() => {
  const timer = setInterval(() => {
    console.log(count); // 古い値
  }, 1000);
  return () => clearInterval(timer);
}, []);

// 解決策
useEffect(() => {
  const timer = setInterval(() => {
    setCount(prevCount => {
      console.log(prevCount); // 最新の値
      return prevCount + 1;
    });
  }, 1000);
  return () => clearInterval(timer);
}, []);

📚 学習リソース
#

🎯 次のステップ
#

Hooksの基本を習得したので、次は：

  1. より複雑なカスタムHooksの作成
  2. パフォーマンス最適化の実践
  3. 実際のプロジェクトでのHooks活用
  4. テスト戦略の学習

このガイドがReact Hooksの理解と活用に役立つことを願っています！何か質問があれば、コメント欄で議論を歓迎します。