Context API and Hooks

Having to pass down props through multiple different levels of components can cause the following issues:

• While creating maintenance in your app, if you make a new prop, you need to pass it down the whole line. You might need to do the same if some component is changed or removed.
• It can create unnecessary noise if we do not know what props are intended for while creating a component and what is just a traveler.
• It creates a dependency on the component that is passing down the props. The component that just passes down the prop knows too much by simply playing the messenger.

To handle these issues, React typically allows access to something called Context, which we've briefly looked into in the previous chapters. React also provides a useful hook for us to be able to access the context of the app called the useContext hook.

useContext Hook

useContext is a React hook that takes a React context object as an argument and gives...