コンポーネントのデータアクセスをカスタムフックでラップするメリット

カスタムフックによってコンポーネントからはI/Oにまつわる副作用やリアクティブ性などの複雑な技術的な知識を分離できる

code:ts

const useCurrentUser = () => {

return /*ログインユーザー*/

}

const Component = () => {

const user = useCurrentUser()

}

メリット

React > Context、Recoil、Fluxのインタフェースに引っ張られない = 実装詳細(private)の変更をその内部に閉じさせることができる

code:ts

// Context

const user = useContext(CurrentUserContext)

// Recoil

const user = useRecoilValue(currentUserState)

// Flux(Redux)

const user = useSelector(state => state.user)

上記のようなストア側の詳細知識をuseCurrentUserと抽象化したカスタムフックにできる

これによって

後から技術基盤の変更が容易になる