React Hooksで実現できることをカスタムフックの作り方の実例を踏まえて紹介します。

1. React Hooksで
カスタムフックを
つくろう
株式会社エクストーン 豊田陽一

2. 今日のお話
● React Hooksおさらい
● React Hooksのうれしいところ
● カスタムフックをつくろう

3. React Hooksのおさらい

4. React Hooks
▰ 関数型コンポーネントのためのAPI
▰ React 16.8.0以降で利用可能
▰ 関数型コンポーネント内からのみ利用可能

5. 関数型コンポーネント
▰ propsを引数に受け取り、Reactコン
ポーネントを返す関数
▰ stateやライフサイクルイベントを持たない
▰ Facebook的におすすめ
▰ 出来ることが少ないのでRedux等と組み合わせ
て使われていた

6. React Hooksで出来ること
▰ useState
▰ 状態の保持・更新
▰ useEffect
▰ ライフサイクルイベントの管理
▰ マウント時 / 更新時 / アンマウント時
▰ useContext
▰ コンテキストで管理している値の参照

7. どうやって実現しているのか
▰ 関数型言語的なアプローチ
▰ コンポーネント毎にLinkedListを保持
▰ useXXXを呼ぶたびにLinkedListの値を参照
し、値を返した上でポインタを進める
▰ useXXXがトップレベルでしか呼べない理
由がこれ
▰ render毎にuseXXXの呼び出す回数がズ
レるとLinkedList内で参照される値が変わ
るせい

8. useStateの実現例
▰ useState
▰ リスト内には状態とそれを更新する関数を持つ
▰ 状態を更新する関数は、リスト内の情報を「新しい
値と、それを更新する新しい関数」に更新する
▰ 基本的にはどのフックAPIも似たような作りになっ
ている

9. React Hooksのうれしいところ

10. 関数型コンポーネントで出来るこ
とが増えた
▰ 状態が持てる
▰ コンテキストの参照が出来る
▰ ライフサイクルの管理が出来る
→ クラス型コンポーネントと同等の機能が
実現できるようになった

11. では無い！

12. それやったら
クラス型
使えばええねん

13. そうではなく

14. 再利用の単位: コンポーネント
▰ 状態の保持
▰ ライフサイクルによるロジック
▰ 複雑化しがち
▰ カプセル化
▰ コンポーネントの保持している状態をコンポーネン
ト外から参照できない

15. 再利用の単位: コンポーネント
▰ ロジックの値を参照したい場合には不
向き
▰ ex) ログイン中のユーザー名を取得する
▰ ex) ログイン状態を監視し、変更があった場合に
コールバックを呼ぶ
▰ etc.

16. 再利用の単位: カスタムフック
▰ 関数
▰ コンポーネント間で共通するロジックの
共有
▰ useStateを利用することでステートフル
にすることが出来る

17. 再利用の単位: カスタムフック
▰ 規約としてuseXXXという名前にする
▰ 関数型コンポーネントと同様に、React
Hooks APIをトップレベルでのみ呼び出
せる
▰ 他のカスタムフックを呼ぶことも可能

18. 本当に
React Hooksで
うれしいこと

19. カスタムフックという
新しい
再利用の単位を
実現したこと

20. カスタムフックを作ろう

21. ログイン機能を作る
▰ やりたいこと
▰ IDとパスワードをサーバーに送るとログインが
出来る
▰ ログイン状態になるとユーザーのプロフィール
情報が取得出来る

22. 提供するAPI
▰ useSignIn
▰ ログイン機能
▰ Provider
▰ コンテキストの値を提供するプロバイダ
▰ UserContext
▰ ユーザー情報を管理するコンテキスト

23. useSignIn
ログイン機能の提供

24. useSignIn
▰ サインイン機能を実現
▰ state: ログイン状態 (ログイン前/通信中/ログ
イン失敗/ログイン成功)
▰ errors: ログイン失敗時のエラー
▰ signIn: ログインAPIをリクエストする関数

25. useSignInの利用イメージ
const SignIn = (props) => {
const [state, error, signIn] = useSignIn()
const { user } = useContext(UserContext)
if (user) {
return <></>
}
return <div>
{error}
<button onClick={signIn} disabled={state === ‘loading’}>Sign In</button>
</div>
}
export default SignIn

26. useSignInの実装
const useSignIn = () => {
const [state, setState] = useState('before_sign_in')
const [errors, setErrors] = useState(null)
const { user, setUser } = useContext(UserContext)
const signIn = useCallback(() => {
if (user !== null) { return }
if (state === 'loading' || state === 'success') { return }
if (state === 'waiting_callback') {
firebase.auth().getRedirectResult().then((result) =>
{
if (result.credential) {
setState('loading')
setUser(result.user)
setState('success')
}
}).catch((error) => {
setState('error')
setErrors(error.code)
})
setState('loading')
} else {
const provider =
new firebase.auth.GoogleAuthProvider()
firebase.auth().signInWithRedirect(provider)
setState('waiting_callback')
}
}, [user, setUser, state])
return [state, errors, signIn]
}

27. Provider, UserContext
const UserContext = createContext({ user: null, setUser: () => {} })
const Provider = ({children}) => {
const [user, setUser] = useState(null)
useEffect(() => {
firebase.auth().onAuthStateChanged(function(user) {
setUser(user)
});
}, [user, setUser])
return <UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
};
export { UserContext, Provider }

28. コンポーネントから
ログイン関連の処理を
隠せた！

29. おわりに
▰ カスタムフック
▰ 新しい共通化の単位
▰ 基本のReact Hooks APIの組み合わせで実現
▰ 名前はuseXXXにする

30. こんなの作った
▰ useMediaQuery
▰ npm i @rswisteria/react-use-media-query
▰ https://www.npmjs.com/package/@rswisteria/react-use-media-query
▰ https://github.com/rswisteria/useMediaQuery
▰ JavaScript上でメディアクエリを扱うカスタムフック

31. みんなも
カスタムフック
作って
公開しよう！