React Hooksでカスタムフックをつくろう
2 likes4,666 views
React Hooksで実現できることをカスタムフックの作り方の実例を踏まえて紹介します。
![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](https://image.slidesharecdn.com/letscreatecustomhooks-191025084412/85/React-Hooks-25-320.jpg)
![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]
}](https://image.slidesharecdn.com/letscreatecustomhooks-191025084412/85/React-Hooks-26-320.jpg)
![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 }](https://image.slidesharecdn.com/letscreatecustomhooks-191025084412/85/React-Hooks-27-320.jpg)
React Hooksでカスタムフックをつくろう
- 2. 今日のお話 ● React Hooksおさらい ● 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も似たような作りになっ ている
- 10. 関数型コンポーネントで出来るこ とが増えた ▰ 状態が持てる ▰ コンテキストの参照が出来る ▰ ライフサイクルの管理が出来る → クラス型コンポーネントと同等の機能が 実現できるようになった
- 11. では無い！
- 13. そうではなく
- 14. 再利用の単位: コンポーネント ▰ 状態の保持 ▰ ライフサイクルによるロジック ▰ 複雑化しがち ▰ カプセル化 ▰ コンポーネントの保持している状態をコンポーネン ト外から参照できない
- 15. 再利用の単位: コンポーネント ▰ ロジックの値を参照したい場合には不 向き ▰ ex) ログイン中のユーザー名を取得する ▰ ex) ログイン状態を監視し、変更があった場合に コールバックを呼ぶ ▰ etc.
- 16. 再利用の単位: カスタムフック ▰ 関数 ▰ コンポーネント間で共通するロジックの 共有 ▰ useStateを利用することでステートフル にすることが出来る
- 17. 再利用の単位: カスタムフック ▰ 規約としてuseXXXという名前にする ▰ 関数型コンポーネントと同様に、React Hooks APIをトップレベルでのみ呼び出 せる ▰ 他のカスタムフックを呼ぶことも可能
- 20. カスタムフックを作ろう
- 21. ログイン機能を作る ▰ やりたいこと ▰ IDとパスワードをサーバーに送るとログインが 出来る ▰ ログイン状態になるとユーザーのプロフィール 情報が取得出来る
- 22. 提供するAPI ▰ useSignIn ▰ ログイン機能 ▰ Provider ▰ コンテキストの値を提供するプロバイダ ▰ UserContext ▰ ユーザー情報を管理するコンテキスト
- 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 }
- 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上でメディアクエリを扱うカスタムフック