Components and Props
Everything begins with a single component. But as your component will grow in responsibility and complexity, it has to break down. Eventually you will have several components, each of its own complexity.
Components let you isolate parts of your large application so that you can separate your concerns, and if anything breaks you can easily identify where things went wrong. More often than not, components will have some data or functionality that another component needs. This could be to avoid duplication, or to keep the components in synchronization.
Some components might even need to communicate with each other, and the way they do this in React is through props.
Components are like JavaScript functions that can accept any number of arguments. These arguments, in components, are called props (short for properties) that are object arguments.
Prop-drilling
If your component hierarchy grows in vertical size, it becomes tedious passing props several React components down, from a parent component to a deeply nested child component. Most often all the React components in between are not interested in these props and just pass the props to the next child component until it reaches the desired child component.
Passing down props several components down your component tree is termed prop-drilling. Passing props down isn’t technically wrong and is, in fact, the default way to do it. But along the chain, anything could go wrong: there could be a typo, refactoring could occur in the intermediary components, possible mutation of these props could happen. And if we remove just one of the intermediary components, things will fall apart. Apart from these, there’s also a case of re-rendering. Because of the way React rendering works, those intermediary components will also be forced to re-render which can result in draining the performance of your app.
The React Context
To give us a way out of this mess and to solve the problems associated with prop-drilling, React Context came to our rescue.
Context provides a way to pass data through the component tree without having to pass props down manually at every level. Now, instead of passing down the props through each component, you can tunnel props through these components implicitly with React Context. If a component needs access to the information from the context, it can consume it on demand, because a top-level component provides this information in the context.
Creating the React Context
Creating the React Context gives you access to the Provider and Consumer component. When you create the context with React by using createContext, you can pass it an initial value. This initial value can be null too.
const Context = React.createContext(null);
Now a component would have to provide the context with the given Provider component. Its value can be anything from component state (e.g. fetched data) to props. If the value comes from a modifiable React State, the value passed to the Provider component can be changed too.
Any other components can now derive its context object by consuming the context. The Consumer component makes the passed context available by using a render prop. Following this way every component that needs the context could get the necessary information from React's Context by using the Context's Consumer component. You only have to use the Provider component which passes the value once somewhere above them.
When do we use the React Context?
When your React component hierarchy grows vertically in size and you want to be able to pass props to child components without bothering components in between and when you want to have advanced state management in React with React Hooks for passing state and state updater functions via React Context through your React application. Doing it via React Context allows you to create a shared and global state.
Thank You!
Top comments (0)