The useContext Hook
Learn how the useContext hook manages shared state and reduces prop drilling
We'll cover the following...
In React, managing shared data between components can be challenging as the application grows. Passing props through multiple levels (a process known as prop drilling) can quickly make our code verbose and difficult to maintain.
Prop drilling
Prop drilling is a situation in React where data (props) is passed from a parent component to deeply nested child components through intermediate components that don’t need the data. It occurs when a parent component needs to provide data or functions to a child that is several layers deep in the component tree, requiring each intermediate component to drill or forward the props down the hierarchy.
Line 2: The
userobject (data) originates in theAppcomponent.Lines 4, 8, and 12: To reach the
GrandChildcomponent, theuserprop is passed throughParent,Child, and finally toGrandChild.
The Parent and Child components don’t need the user data, but they still have to receive and forward it as props.
How to avoid prop drilling
React provides features (such as the Context API and the useContext ...