特徴
基本はただの関数になるのですが、ただの関数なのにhooksの各機能を使用することができます。普通のJavaScriptの関数だとhooksは使えないです。
コンポーネントからロジックを分離して、ロジックを使いまわそうというのがコンセプトになります。そうすることでコンポーネントの見通しがよくなりますし、テストが簡単になります。
フォルダ構成
特に決まりはないですが、特に理由がなければhooksの各機能を共通化するという意味でhooksという名前のフォルダを作るとよいでしょう。
命名例や用途
主にAPIからデータを取得する処理をまとめる用途などで使われるケースが多いです。
| useAllUsers.ts | ユーザーを全件取得するhook |
| useUser.ts | ユーザーを個別に取得するhook |
実装方法
useXXXという名前を付けるのが暗黙のルールになっています。
useAllUsers.js
API取得結果だけではなく、loadingやerrorの状態などもまとめて状態管理して渡してあげます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const useAllUsers = () => { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); const getUsers = () => { setLoading(true) setError(true) axios.get(URL).then((res)=>{ setUsers(res.data) }).catch(()=>{ setError(false) }).finally(()=>{ setLoading(false) }) } return {users,getUsers,loading,error} } |
呼び出す側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import {useAllUsers} from "hooks/useAllUsers" function App () { const {users,getUsers,loading,error} = useAllUsers(); const users = getUsers(); if (error) return <div>エラー発生</div> if (loading) return <div>loading...</div> return ( <div> users[0].name </div> ) } |
この記事へのコメントはありません。