カスタムフックで React ゲームをレベルアップする: 楽しくて実践的なガイド

React 愛好家の皆さん、こんにちは!あなたも私と同じなら、React でユーザー インターフェイスを簡単に構築できるところが気に入っているでしょう。しかし、場合によっては、異なるコンポーネント間で同じロジックを繰り返していることに気づくことがあります。そこでカスタム フックが登場します。カスタム フックは、コードをよりクリーンかつ効率的にする秘密の超能力のようなものです。カスタム フックの世界に飛び込んで、カスタム フックがどのように React ゲームを向上させることができるかを見てみましょう。

そもそもフックとは何ですか?

まず最初に、フックとは何かについて簡単にまとめてみましょう。 React 16.8 で導入されたフックを使用すると、クラスを作成せずに状態やその他の React 機能を使用できるようになります。最も人気のある組み込みフックには、useState、useEffect、useContext などがあります。

内蔵フックの例

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

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

この簡単な例では、useState と useEffect が連携して状態と副作用を管理します。クリーンでシンプル、そしてパワフルです。

カスタムフックを気にする必要があるのはなぜですか?

カスタム フックは、再利用性とコンポーネントをクリーンに保つことがすべてです。これらを使用すると、コンポーネント間でロジックを抽出して共有できます。便利な機能を保存し、必要なときにいつでも使用できる、個人的なツールボックスと考えてください。

カスタムフックの利点

• 再利用性: 一度書けばどこでも使用できます。コードを重複させることなく、さまざまなコンポーネント間でロジックを共有します。
• 可読性: コンポーネントをレンダリングに集中させて、読みやすく保守しやすくします。
• 保守性: ロジックを 1 か所で更新すると、フックが使用されるすべての場所に反映されます。

一緒にカスタムフックを構築しましょう

API からデータをフェッチする必要があるコンポーネントがいくつかあると想像してください。各コンポーネントに同じフェッチ ロジックを記述する代わりに、それを処理するカスタム フックを作成できます。 useFetch を作成しましょう。

ステップバイステップ: useFetch の作成

1. フックの作成: まず、useFetch.js という名前の新しいファイルを作成します。

import { useState, useEffect } from 'react';

    function useFetch(url) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);
      const [error, setError] = useState(null);

      useEffect(() => {
        const fetchData = async () => {
          try {
            const response = await fetch(url);
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            const result = await response.json();
            setData(result);
          } catch (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        };

        fetchData();
      }, [url]);

      return { data, loading, error };
    }

    export default useFetch;

1. フックを使用する: 次に、コンポーネントで useFetch を使用してみましょう。

import React from 'react';
    import useFetch from './useFetch';

    function DataFetchingComponent() {
      const { data, loading, error } = useFetch('https://api.example.com/data');

      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error: {error.message}</p>;

      return (
        <div>
          <h1>Data</h1>
          <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}