Understanding how we can avoid passing props through many levels of component hierarchy in ReactJS

Question

I was going through ReactJS docs. On the page explaining Contexts, I came across following:

If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.
For example, consider a Page component that passes a user and avatarSize prop several levels down so that deeply nested Link and Avatar components can read it:
<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... which renders ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... which renders ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

In above code, we are still passing user and avatarSize as props right? Then how it allows to "avoid passing some props through many levels" as stated in the first sentence of the above quote?

That is an example of prop drilling, where you pass props to each child component. Scroll down on that same page to see how context solves this and how to implement it. — boxdox, May 28 '21 at 07:03
Does this answers my question? Doesnt the page give this example to show how to "avoid passing props to each child" (first sentence in quote)? Or am understanding it wrong? — Rnj, May 28 '21 at 07:14
The code provided in your question is the "problem code". If you go on reading the page explaining contexts, it shows how to fix this in various ways. — Rahul.A.Krishna, May 28 '21 at 07:20
see, prop drilling is bad because when you pass props down the tree, and a higher component updates the props, it causes all children to re-render, even if the child doesn't use the prop. In the code you shared, one way to solve this is [inversion of control](https://reactjs.org/docs/composition-vs-inheritance.html#containment), where you send the whole component as a prop — boxdox, May 28 '21 at 07:21
@boxdox TBH, I still dont get "If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context." How "component composition" it self help avoid prop dirlling ? — Rnj, May 28 '21 at 07:46

score 0 · Answer 1 · answered May 28 '21 at 07:26

0

The code you quoted is from the "problem" part of the documentation. That code isn't meant to be the solution, it shows the problem with prop drilling.

Scrolling a little down shows how to solve the problem using Component Composition

Component Compostion:

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// Now, we have:
<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout userLink={...} />
// ... which renders ...
<NavigationBar userLink={...} />
// ... which renders ...
{props.userLink}

answered May 28 '21 at 07:26

Rahul.A.Krishna

68
2
9

Which they point out still isn't ideal. You've essentially boxed up the props and drill the box as a whole instead, which is basically the same problem. – Drew Reese May 28 '21 at 07:29
TBH, I still dont get "If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context." How "component composition" it self help avoid prop dirlling ? – Rnj May 28 '21 at 07:50

score -1 · Answer 2 · answered May 28 '21 at 07:39

The solution to prop drilling is we can use context api. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. you can check details here on official documentation!

Understanding how we can avoid passing props through many levels of component hierarchy in ReactJS

2 Answers2