A beauty of React is the ability to make components dynamic through the use of props. Recall that a component is a function that takes props as an argument and returns JSX, which is a language that allows us to directly write HTML in React inside JavaScript files. Props contain information that is passed down from the parent component to the child components of the application through an object.
A simple example below shows a Parent component that returns a Child component with props status, food, and number passed down to it.
Additionally, the props can be destructured using object destructuring. Notice what happened after the props was destructured. The status, food, and number were given their own variables and are able to be directly called. This makes code much cleaner and easier to read.
Sometimes, there are many components in an application, in which only certain child components need access to the props. The application can contain a nested structure like this example where data is initially grabbed from the App component, through importing data, fetching, etc. In this case, the Form and CardInfo components both need access the data prop so the parent component App passes the data prop all the way down to those components. This is commonly known as prop-drilling.
Prop drilling is fine in a small application like this one, but can be cumbersome when dealing with large applications that are heavily nested. To solve this issue, the React Hook called “useContext” is used. Simply put, the useContext hook allows us to directly pass a prop to all the components that need it without having to prop drill.
React Context requires two things:
- Context object — object that contains useful data and/or stateful info. (Think internet or cable service).
- A context provider component — “provides the context”, or useful info. (Think internet or cable service provider).
Finally, we just need to import “useContext” hook from the React library to be able to use context and call our context object using ‘useContext( )’ in our target components.
And there you have it! React Context allows us to easily pass useful (stateful as well) information directly to specific components without having to play ‘hot-potato’ with a prop!
However, there is a something to be cautious about when using context. Let us say we created a new component in our application called About, which contains the CardInfo component as well. Although CardInfo received ‘context’ because it is a child of the Container component, which is wrapped by the DataProvider tag in the App component, running the app will throw an error because the CardInfo child component of About is ‘out of context’ (not wrapped inside the context provider tags.
This is analogous to Javascript concept of scoping issues. You can read more about scope in Javascript here.
React documentation states to use context sparingly,
Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.
If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context. — Before You Use Context
Component composition makes use of the children prop to eliminate prop drilling in our example, without the need for context.
As Michael Jackson puts it in his video, useContext is implicit while props and children are explicit, which avoids complexity and issues such as a component being out of context.
