カスタム フックは、React の組み込みフックとは異なり、より特定の目的に使用される React の強力な機能であり、一般的な機能を独立した関数にカプセル化することで実現されます。カスタム フックは再利用性を促進し、コンポーネントの構成を改善し、コードの保守性を全体的に強化します。

このガイドでは、カスタム フックの使用目的を詳しく説明し、カスタム フックの作成の基本と、それを他のコンポーネントで使用する方法を理解します。次に、フェッチ API カスタム フックを構築することで実際の例を説明します。

基本を理解する

通常、開発者はカスタムフックという用語を怖がるので、それをわかりやすく説明しましょう。

カスタム フックは、use プレフィックスで始まる単なる関数です (これはカスタム フックが機能するために重要です)。
この関数は、React ビルトイン フックを利用する再利用可能なロジックで構成されます。通常、複数のコンポーネントにわたって同じロジックがある場合は、カスタム フックの使用を検討します。そのため、カスタム フックを利用することで、コードの構成や保守性の強化などの複数の問題を解決できます。

単純なカスタムフックの作成

以下の例は、useState フックを使用してカウント状態を管理し、カウント状態のみを設定するインクリメント関数またはデクリメント関数を使用してそれぞれカウントを更新する単純なカウンター カスタム フックです。

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev   1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

おめでとうございます。独自のカスタム フックを作成できました。非常に簡単です。次はこのフックの使用方法について詳しく説明します

コンポーネントでのカスタムフックの使用

別のコンポーネントでのカスタム フックの使用は、他のコンポーネント内のカスタム フックから返された値を破棄するだけで行われます

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    
{ count }
       
     - 
  )
}

export default Page

カスタムフックを使用する実際の例

最も反復的なロジックの 1 つは、電子商取引サイトが認証、支払いプロセス、すべての商品の表示、コメント、レビューなどのためにデータを取得する API の取得です。

アプリケーション全体で繰り返されるフェッチ ロジックの量は想像できると思いますが、カスタム フックを使用すると簡素化できます。

このセクションではカスタムのフェッチフックを作成します。

useState と useEffect の組み込み React フックを使用します
データの状態、データのフェッチ中にスピナーを表示したい場合の保留状態、フェッチが失敗した場合のエラー状態を用意します。

以下のコードは一目瞭然です。 useEffect 内で、フェッチ ロジックを処理する非同期の fetchData 関数を定義します。 useEffect の下で、カスタム フックは他のすべてのコンポーネントで使用できる次の値を返します。 data、pending、error.

URL 値を useFetch カスタム フック パラメータに渡していることに注意してください。これは、データをカスタム フックに渡すことができることを意味します

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

Page コンポーネント内で useFetch フックを使用することで、エラーが発生した場合にクライアントにメッセージを表示し、データのフェッチ中にスピナーを表示し、最後にクライアントにデータを表示できるようになりました。

このコンポーネントはアプリケーション全体で繰り返し使用できるため、反復コードの量が減少します。

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) 
Cloud not fetch data from the server

  return(
    {pending ? 
     ( )
     :
     (
      data.map((item) => (
        

          
{item.title}
  
          
{item.body}
        
       )
      )
    )}
  )
}

export default Page;

結論

カスタム フックは、React コンポーネント内でロジックをカプセル化して再利用するための強力なメカニズムを提供します。共通の機能を専用の関数に抽出することで、コードの編成を強化し、保守性を向上させ、コードの再利用性を促進できます。

カスタム フックの作成の基礎を検討し、React コンポーネント内でカスタム フックを使用する方法を理解し、カスタム フックを使用する実際の例を示しました。