Component composition

https://reactjs.org/docs/composition-vs-inheritance.html
If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

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} />
// which renders
<PageLayout userLink={...} />
// which renders
<NavigationBar userLink={...} />
// which renders
{props.userLink}