Question:
When should we use React Context instead of prop-drilling?
prop-drilling refers to the technique where we pass a value from one component to nested components through props.
Answer:
If we have a value that could be accessed anywhere from the application, we can consider Context. Few examples that fit to this condition is:
- Dark or light theme for a site
- Global site level theme settings
- User authentication status like is guest or is registered.
If the value shared by a component is specific to that component and its children, it is good to use prop-drilling. That improves code readability and the developer can easily identify from where this value is coming.
Question:
Here we have a set of 5 React components that is nested one inside other. Component A
is passing a value to component E
through prop-drilling.
const E = (props) => <h1>{props.fruit}</h1>;
const D = (props) => <E fruit={props.fruit} />;
const C = (props) => <D fruit={props.fruit} />;
const B = (props) => <C fruit={props.fruit} />;
const A = (props) => <B fruit={props.fruit} />;
<A fruit="Apple" />;
How can we rewrite the same code using useContext()
?
Answer:
import React, { useContext } from "react";
const FruitContext = React.createContext();
const E = (props) => {
const fruit = useContext(FruitContext);
return <h1>{fruit}</h1>;
};
const D = (props) => <E />;
const C = (props) => <D />;
const B = (props) => <C />;
const A = (props) => (
<FruitContext.Provider value="Apple">
<B />
</FruitContext.Provider>
);
export default A;