useContextを使った状態管理のベストプラクティス

2024年6月14日

useContextを使用する際のベストプラクティスをいくつか紹介します。これらの方法を用いることで、コンポーネントの再利用性を高め、コードのメンテナンス性を向上させることができます。

1. コンテクストの分割

コンテクストを分割することで、特定のデータだけを必要とするコンポーネントに対して不要な再レンダリングを避けることができます。例えば、ユーザー情報とテーマ設定を別々のコンテクストで管理する方法です。

const UserContext = createContext();
const ThemeContext = createContext();

2. カスタムフックの作成

カスタムフックを作成することで、コンテクストの使用を簡潔にし、再利用可能なコードを作成できます。以下は、ユーザー情報にアクセスするためのカスタムフックの例です。

const useUser = () => {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

// UserProviderコンポーネント内で使用
const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};

3. パフォーマンスの最適化

コンテクストの値が頻繁に変更される場合、パフォーマンスの低下が懸念されます。この問題を解決するために、useMemoやuseCallbackを活用して、不要な再レンダリングを防ぐことができます。

const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = useCallback((userData) => {
    setUser(userData);
  }, []);

  const logout = useCallback(() => {
    setUser(null);
  }, []);

  const value = useMemo(() => ({ user, login, logout }), [user, login, logout]);

  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
};

useContextの応用例

1. 認証コンテクスト

アプリケーション全体でユーザーの認証状態を管理するために、useContextを使用できます。

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    setIsAuthenticated(true);
  };

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

const useAuth = () => {
  return useContext(AuthContext);
};

// 使用例
const LoginButton = () => {
  const { login } = useAuth();

  return <button onClick={login}>Login</button>;
};

2. 多言語対応コンテクスト

多言語対応を実現するためのコンテクストの例です。選択された言語に基づいて、アプリケーション全体で表示するテキストを変更します。

const LanguageContext = createContext();

const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  const switchLanguage = (lang) => {
    setLanguage(lang);
  };

  return (
    <LanguageContext.Provider value={{ language, switchLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

const useLanguage = () => {
  return useContext(LanguageContext);
};

// 使用例
const LanguageSwitcher = () => {
  const { switchLanguage } = useLanguage();

  return (
    <div>
      <button onClick={() => switchLanguage('en')}>English</button>
      <button onClick={() => switchLanguage('es')}>Spanish</button>
    </div>
  );
};

まとめ

ReactのuseContextフックは、コンポーネント間でデータを効率的に共有するための強力なツールです。コンテクストAPIと組み合わせて使用することで、アプリケーションの状態管理をシンプルかつ効果的に行うことができます。この記事で紹介したベストプラクティスや応用例を参考に、useContextを活用して、より優れたReactアプリケーションを構築してください。