Context, Redux or Composition?

Pump-jack mining crude oil with the sunset

I was one of the developer who got impacted by the recent layoffs from tech companies. So, I started giving interviews for frontend positions with react.

In one of the companies I was given a classic prop drilling problem in react, and was asked to solve it. To keep things simple, the problem given was like this:

export default function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo
      <div>
        {user ? (
          <Dashboard user={user} />
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard({ user }) {
  return (
    <div>
      <DashboardNav user={user} />
    </div>
  );
}

function DashboardNav({ user }) {
  return (
    <div>
      <WelcomeUser user={user} />
      <UserRole user={user} />
    </div>
  );
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

As you can observe, we are passing the user prop from App component to the child components WelcomeUser and UserRole. The intermediate components Dashboard and DashboardNav are just forwarding the props and not really using it.

This is a classic prop drilling issue in react.

Interestingly, the interviewer asked to solve the problem by either React Context API or by using Redux.

Solving by React Context

Using context API to solve this problem would look like the code below.

1const UserContext = React.createContext(undefined);
2
3export default function App() {
4  const [user, setUser] = React.useState(null);
5
6  const handleLogin = () => setUser(userDetails);
7
8  return (
9    <div className="App">
10      Company Logo: Context
11      <div>
12        {user ? (
13          <UserContext.Provider value={user}>
14            <Dashboard />
15          </UserContext.Provider>
16        ) : (
17          <button onClick={handleLogin}>Login</button>
18        )}
19      </div>
20    </div>
21  );
22}
23
24function Dashboard() {
25  return (
26    <div>
27      <DashboardNav />
28    </div>
29  );
30}
31
32function DashboardNav() {
33  return (
34    <div>
35      <WelcomeUser />
36      <UserRole />
37    </div>
38  );
39}
40
41function WelcomeUser() {
42  const user = React.useContext(UserContext);
43  return <div>Welcome {user.name}</div>;
44}
45
46function UserRole() {
47  const user = React.useContext(UserContext);
48  return <div>Role {user.role}</div>;
49}

We are creating UserContext and wrapping the Dashboard with Provider, so that we can pass the props we want to a deeply nested child component. This solution works.

Components using user property with React Context

Solving by Redux

So, if we are going on the classical redux route, we need to create a similar structure and wrap everything with a single global store, which contains the user object.

The solution code would contain a ton of boilerplate, as we are using redux for solving a simple problem.

I just gave the gist of the code below, but if you really want to explore the full code, here you go: solving with redux.

1export default function App() {
2  return (
3    <Provider store={store}>
4      <ReduxConnectedApp />
5    </Provider>
6  );
7}
8
9function ReduxApp({ user, setUser }) {
10  const handleLogin = () => setUser(userDetails);
11
12  return (
13    <div className="App">
14      Company Logo: Redux
15      <div>
16        {user ? <Dashboard /> : <button onClick={handleLogin}>Login</button>}
17      </div>
18    </div>
19  );
20}
21
22
23function Dashboard() {
24  return (
25    <div>
26      <DashboardNav />
27    </div>
28  );
29}
30
31function DashboardNav() {
32  return (
33    <div>
34      <ConnectedWelcomeUser />
35      <ConnectedUserRole />
36    </div>
37  );
38}
39
40function WelcomeUser({ user }) {
41  return <div>Welcome {user.name}</div>;
42}
43
44const mapStateToPropsWelcomeUser = (state) => ({ user: state });
45const ConnectedWelcomeUser = connect(mapStateToPropsWelcomeUser)(WelcomeUser);
46
47function UserRole({ user }) {
48  return <div>Role {user.role}</div>;
49}
50
51const mapStateToPropsUserRole = (state) => ({ user: state });
52const ConnectedUserRole = connect(mapStateToPropsUserRole)(UserRole);

We have connected the components that needs access to global state stored in redux.

How I solved it

Having read about react composition, I solved the problem by making use of children prop, which looked like this

1export default function AppSolution() {
2  const [user, setUser] = React.useState(null);
3
4  const handleLogin = () => setUser(userDetails);
5
6  return (
7    <div className="App">
8      Company Logo
9      <div>
10        {user ? (
11          <Dashboard>
12            <DashboardNav>
13              <WelcomeUser user={user} />
14              <UserRole user={user} />
15            </DashboardNav>
16          </Dashboard>
17        ) : (
18          <button onClick={handleLogin}>Login</button>
19        )}
20      </div>
21    </div>
22  );
23}
24
25function Dashboard({ children }) {
26  return <div>{children}</div>;
27}
28
29function DashboardNav({ children }) {
30  return <div>{children}</div>;
31}
32
33function WelcomeUser({ user }) {
34  return <div>Welcome {user.name}</div>;
35}
36
37function UserRole({ user }) {
38  return <div>Role {user.role}</div>;
39}

If you think about it, this is the easy way to solve this problem without introducing any complexity like createContext or react-redux. We also get other benefits such as

In the future, if we introduce any state inside Dashboard and manipulate it, our DashboardNav never gets re-rendered.
By supplying the props only to the required components, we have a good visibility of all the consumers of user, without having to navigate between components (files) to look for them.

This pattern is not new, and it's already been talked about in react community. One such good walkthrough is Using Composition in React to Avoid "Prop Drilling"

Conclusion

However, I got the feedback from the interviewer, and it goes like this

The interviewee did not understand the problem correctly, and was unable to provide the expected solution.

I guess the reason being either the interviewer was not aware of this pattern or I chose to solve the problem in a way that was not asked for.

Having said that, I am now motivated to write more about interesting patterns in react, hoping it reaches the wider audience.

Let me know what you think by sharing this article.

References

Let's Discuss On Twitter

Edit this Post On GitHub