How can you avoid prop drilling in React?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const UserContext = createContext(null);

function App({ user }) {
  return (
    <UserContext.Provider value={user}>
      <Layout><Sidebar><Avatar /></Sidebar></Layout>
    </UserContext.Provider>
  );
}

function Avatar() {
  const user = useContext(UserContext);   // no props at all
  return <img src={user.avatar} alt={user.name} />;
}