ReactIntermediate#patterns#context

What is prop drilling and how do you avoid it?

Passing props through many intermediate components that do not use them. Fix it with context, composition (children props) or a state library.

Example
// instead of user -> A -> B -> C
const UserCtx = createContext(null);
const user = useContext(UserCtx); // read directly in C

Related Questions

1
ReactBeginner#patterns

What is the children prop and composition?

Open
2
ReactBeginner#jsx

What are fragments and why use them?

Open
3
ReactBeginner#jsx

What is conditional rendering in React?

Open