カスタムカスタムフック:何、理由と方法

chuttersnapのUnsplashによる写真
今は反応フックがリリースされてから1年が経ちましたが、私は安全に言うことができます.
しかし、フックは、彼らが反応機能的な構成要素で使われなければならない最大の存在のうちの1つの彼ら自身の限界のいくらかで来ます.これはデザインによるものです.なぜなら、私たちのステートフルなロジックは、必要とされているだけでなく、必要なコンポーネントに結び付けられるからです.しかし、私たちは時々、コンポーネント間の我々のステイタスな論理を再利用したいです.フックの前に、これは上位のコンポーネントを通して可能であるだけで、小道具、そのconnect(Component)でReduxのような図書館で一般的なパターンを提出するか、ルータのwithRouter(Component)に反応しました.私は個人的に、彼らがGotchasの彼らのセットで来るわずかに難しい抽象化であるので、高次のコンポーネントを書くのを好みません.ありがたいことに、フックは難しい抽象化を学ぶことを必要とせずにstatutical論理を共有するためのより簡単な方法を提供し、その方法はカスタムフックです.
カスタムフックは、単に既存のフックを囲むラッパー機能です.それだ!唯一のキャッチは、アクションがカスタムフックであることを認識するために、その名前はuseで始まる必要があります.同じrules for using hooksもカスタムフックに適用されます、例えば、彼らは条件またはループで入れ子にされることができなくて、機能的な構成要素の外で、または、もう一つのフックの外で呼ばれることができません.
カスタムフックはフック自体に慣れている必要があります.あなたが使用しなかったならば、私は本当に彼らが彼らが作ることができたすべてのカスタムフックの中心的なビルディングブロックである最初の原因を調べてみることを勧めます.
我々がカスタムフックを書くのを見る簡単な例をしましょう.私たちは想像してアプリを一度ユーザーのログインは、我々の友人のリストを取得するAPIのリクエストを取得取得します.機能的なコンポーネントとフックを使用して、我々のコンポーネントはこのように見えます.

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

function Dashboard(props){
    const [friends, setFriends] = useState([])
    const [error, setError] = useState({})
    ussEffect(() => {
        if(props.user.loggedIn){
            fetch(`/api/${props.user.id}/friends`).then(response => {
                response.json().then( friends => setFriends(friends))
            })
            .catch(error => setError(error)
        }
    }, [props.user.isLoggedIn, props.user.id])

    return <div>
        { friends.length > 0 ? 
            friends.map(friend => <div key={friend.id}>{friend.name}</div> 
            : error.message
        </div>
}

export default Dashboard

この動作を他のコンポーネント、たとえばオンラインの友達を表示するチャットボックスなどで複製したいとします.我々のステイタリーな論理は、ほとんど同じです.我々のコードをコピーする代わりに、問題へのより良いアプローチはカスタム・フックにこの論理を抽出することです.我々はカスタムフックuseFriendListを呼び出します.

// useFriendList.js

export default function useFriendList(user){
    const [friends, setFriends] = useState([])
    const [error, setError] = useState({})
    ussEffect(() => {
        if(user.loggedIn){
            fetch(`/api/${user.id}/friends`).then(response => {
                response.json().then( friends => setFriends(friends))
            })
            .catch(error => setError(error)
        }
    }, [user.id, user.isLoggedIn])

    return [friends, error]
}

今、我々は単にそのような我々の前のコンポーネントを再評価することができます.

import React from 'react'
import useFriendList from './useFriendList'

function Dashboard(props){
    const [friends, error] = useFriendList(props.user)

    return <div>
        { friends.length > 0 ? friends.map(friend => <div key={friend.id}>{friend.name}</div> 
            : error.message
        </div>
}

export default Dashboard

そして、それは本当にそこにあるすべてです.私たちのコンポーネントは、はるかにクリーナーに見えるだけでなく、我々はコンポーネント内のこのロジックを再利用する必要がある任意の時間、我々はちょうど私たちのカスタムフックを呼び出します.
個人的に、私はこのパターンをより高次のコンポーネントよりずっと好きです、なぜならば、Hostとは異なり、カスタムフックはあなたがちょうどフックを通常使うより、少しでも考える必要はありません.あなたがしなければならないのは、ラッパー関数で既存のロジックをスローすることです.これにより、コンポーネントの構成などの多くのよりアクセス可能で簡単に始めることができます.場合は、カスタムのフックは、このポストは、それを試してみたいと思います難しいコンセプトになるフックを発見した.