3日目: カスタムフックの作成と実践的な利用方法

カスタムフックの基本

カスタムフックは、Reactの再利用可能なロジックの機能を提供します。カスタムフックは通常、複数のコンポーネント間で共有される状態や副作用の管理を簡略化するために使用されます。作成にあたっては、関数名が「use」で始まる必要があり、ReactのuseStateやuseEffectなどの既存フックを合成して新しいフックを構築します。

        構造: src/hooks/useCustomHook.jsnコードを以下に示します。

useDocumentTitle フックの作成

useDocumentTitleは、Webページのドキュメントタイトルを動的に更新するカスタムフックです。このフックはReactのuseEffectを使用して、コンポーネントのレンダリング後にドキュメントのタイトルを指定された値に更新します。次にその作成手順と具体的なコード例を示します。

        import { useEffect } from 'react';nnfunction useDocumentTitle(title) {n    useEffect(() => {n        document.title = title;n    }, [title]);n}nnexport default useDocumentTitle;nn使用方法: コンポーネント内でこのカスタムフックをインポートし、任意のタイトルを引数として渡します。nn例:nimport useDocumentTitle from './hooks/useDocumentTitle';nnfunction App() {n  useDocumentTitle('ホームページ');n  return (n    <div>n      <h1>ホームページ</h1>n    </div>n  );n}n