https://images.unsplash.com/photo-1632882765546-1ee75f53becb?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb

前回までの記事

React Hooksを学ぶ【useState編】

ReactHooksを学ぶ【useReducer編】

ReactHooksを学ぶ【useRef編】

ReactHooksを学ぶ【useEffect編①】

ReactHooksを学ぶ【useEffect編②】

ReactHooksを学ぶ【useCallback編】

ReactHooksを学ぶ【useMemo編】

参考

https://ja.react.dev/reference/react/useContext

https://qiita.com/seira/items/fccdf4e73c59c491558d

https://dev.classmethod.jp/articles/react-i-checked-again-how-to-use-usecontext/

https://zenn.dev/enumura/books/a882cb41219318/viewer/b4260b

https://zenn.dev/sora_kumo/articles/72fae8a8244adf

https://qiita.com/jonakp/items/58c9c383473d02479ea7

useContextとは

useContextとは、Reactアプリケーション内でデータを共有するためのHookである。これを使用することで、props drilling(プロップスのバケツリレー)を回避し、コンポーネント間でデータを効率的に受け渡すことができる。

useContextが存在しない世界線

例えば、親コンポーネントで定義された値を孫のコンポーネント、子コンポーネントからさらに呼び出されるコンポーネント、に伝えたい場合、propsをつないでいく必要がある。