Rafeeq's blog

Prop Drilling, Context API and Deep Dive into Recoil.

Photo by Lautaro Andreani on Unsplash

Prop Drilling, Context API and Deep Dive into Recoil.

Rafeeq Syed Amjad's photo
Rafeeq Syed Amjad
·

11 min read

Table of contents

Prop Drilling in React

Prop drilling refers to the process of passing data from a top-level component down to deeper levels through intermediate components.It happens when a piece of state needs to be accessible by a component deep in the component tree, and it gets passed down as prop through all the intermediate components.

Code Implementation

// Top-level component
function App() {
    const data = 'Hello from App component';
    return <ChildComponent data = {data}/>
}

// Intermediate component
function ChildComponent({data}){
 return <GrandchildComponent data = {data}/>
}

// Deepest component
function GrandchildComponent({data}) {
    return <p>{data}</p>
}

In this example, App has a piece of data that needs to be accessed by GrandchildComponent. Instead of using more advanced state management tools, we pass the data as a prop through ChildComponent. This is prop drilling in action.

Drawbacks

  1. Readability

    Prop drilling can make the code less readable, especially when you have many levels of components. It might be hard to trace where a particular prop is coming from.

  2. Maintenance

    If the structure if the component tree changes, and the prop needs to be passed through additional components, it requires modification in multiple places.

While prop drilling is a simple and effective way to manage state in some cases, for larger applications or more complex state management, consider using tools like React Context or state management libraries. These can help avoid the drawbacks of prop drilling while providing a cleaner solution for state sharing.

Context API in React

Context API is a feature in React that provides a way to share values like props between components without explicitly passing them through each level of the component tree. It helps solve the prop drilling problem by allowing data to be accessed by components at any level without the need to pass it through intermediate components.

Key Components of Context API:

  1. createContext :

    the createContext function is used to create a context. It returns an object with two components- Provider and Consumer .

     const MyContext = React.createContext();

  2. Provider :

    The Provider component is responsible for providing the context value to its descendants. It is placed at the top pf the component tree

     <MyContext.Provider value = {/* some value */}>
     {/* Components that can access the context value*/}
 </MyContext.Provider>

Consumer(oruseContexthook):
The Consumer component allows components to consume the context value.

<MyContext.Consumer>
 {value => /* renderr something based on the context value */}
</MyContext.Consumer>

or

const value = useContext(MyContext);

Code Implementation

// Create a context
const UserContext = React.createContext();

// Top Level Component with a Provider
function App(){
 const user = {username:"john_doe",role:"user"};
return (
    <UserContext.Provider value = {user}>
        <Profile/>
    </UserContext.Provider>
)
}
// Intermediate Component
function Profile(){
    return <Navbar/>;
}

// Deepest component consuming the context value
function Navbar(){
    const user = useContext(UserContext);
    return (
        <nav>
            <p>Welecome {user.username} ({user.role})</p>
        </nav>
    );
}

In this example, the UserContext.Provider in the App component provides the user object to all its descendants. The Navbar component, which is deeply nested, consumes the user context value without the need for prop drilling.

Advantages of Context API:

  1. Avoids Prop Drilling:

    Context API eliminates the need for passing props through intermediate components, making the code cleaner and more maintainable.

  2. Global State:

    It allows you to manage global state that can be accessed by components across the application

While Context API is a powerful tool, it's essential to use it judiciously and consider factors like the size and complexity of the application. For complex state management needs, additional tools like Redux might be more suitable.

Other Solutions

Recoil, Redux, and Context API are all solutions for managing state in React applications, each offering different features and trade-offs.

1. Context API

  • Role: Context API is a feature provided by React that allows components to share state without prop drilling. It creates a context and a provider to wrap components that need access to that context.

  • Usage:

       // Context creation
  import { createContext, useContext } from 'react';

  const UserContext = createContext();

   // Context provider
   function UserProvider({ children }) {
        const user = { name: 'John' };
        return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
    }

   // Accessing context in a component
   function Profile() {
       const user = useContext(UserContext);         
        return <p>Welcome, {user.name}</p>;
   }

  • Advantages: Simplicity, built-in React feature.

    2.Recoil

    • Role: Recoil is a state management library developed by Facebook for React applications. It introduces the concept of atoms and selectors to manage state globally. It can be considered a more advanced and feature-rich alternative to Context API.

    • Usage:

        // Atom creation
  import {atom} from "recoil";

  export const userState = atom({
      key: 'userState',
      default: {name:'John'},
  });

  // Accessing Recoil state in a component
  function Profile(){
      const [user,setUser] = useRecoilState(userState);
      return (
      <div>
          <p>Welcome, {user.name}</p>
          <button onClick = {()=> setUser({name:'Jane'})}>Change Name</button>
      </div>
      );
  }

  • Advantages: Advanced features like selectors, better performance optimizations.

3.Redux

  • Role: Redux is a powerful state management library often used with React. It introduces a global store and follows a unidirectional data flow. While Redux provides more features than Context API, it comes with additional concepts and boilerplate.

  • Usage:

      // store creation
  import {createStore} from 'redux';

  const initialState = {user: {name:'John'}};

  const rootReducer = (state = initialState, action) => {
      switch(action.type){
          case 'CHANGE_NAME':
              return {...state, user: {name: 'Jane'}};
        default:
              return state;
      }
  };

  const store = createStore(rootReducer);

  // Accessing Redux state in a component
  function Profile(){
      const user = useSelector((state) => state.user);
      const dispatch = useDispatch();

      return (
      <div>
          <p>Welcome, {user.name} </p>
          <button onClick = {()=> dispatch({type: 'CHANGE_NAME'})}>Change Name</button>
      <div>
      );

  • Advantages: Middleware support, time-travel debugging, broader ecosystem.

Considerations:

  • Complexity: Context API is simple and built into React, making it a good choice for simpler state management. Recoil provides more features and optimizations, while Redux is powerful but comes with additonal complexity.

  • Scalability: Recoil and Redux are often preferred for larger applications due to their ability to manage complex state logic

  • Community Support: Redux has a large and established community with a wide range of middleware and tools. Recoil is newer but gaining popularity, while Context API is part of the React core.

Choosing Between Them:

  • Use Context API for Simplicity: For simpler state management needs, especially in smaller applications or when simplicity is a priority.

  • Consider Recoil for Advanced Features: When advanced state management features, like selectors and performance optimizations, are needed.

  • Opt for Redux for Scalability: In larger applications where scalability, middleware, and a broader ecosystem are important factors.

Problem with Context API

Context API in React is a powerful tool for solving the prop drilling problem by allowing the passing of data through the component tree without the need of explicit props at every level. However, it does not inherently address the re-rendering issue.

When using Context API, updates to the context can trigger re-renders of all components that consume the context, even if the specific data they need hasn't changed. This can potentially lead to unnecessary re-renders and impact the performance of the application.

To mitigate this, developers can use techniques such as memoization (with useMemo or React.memo) to prevent unnecessary re-renders of components that don't depend on the changes in context. Additionally, libraries like Redux, Recoil, or Zustand provide more fine-grained control over state updates and re-renders compared to the built-in Context API.

This leads us to Recoil, a state management library designed explicitly for React applications.

Recoil

Recoil, developed by Facebook, is a state management library for React applications. It introduces a more sophisticated approach to handling state, offering features like atoms, selectors, and a global state tree. With Recoil, we can overcome some of the challenges associated with prop drilling and achieve a more scalable and organized state management solution. As we make this transition, we'll explore Recoil's unique features and understand how it enhances the efficiency and maintainability of our React applications.

Concepts in Recoil

  1. RecoilRoot

    The RecoilRoot is a component provided by Recoil that serves as the root of the Recoil state tree. It must be placed at the top level of your React component tree to enable the use of Recoil atoms and selectors throughout your application.

Here's a simple code snippet demonstrating the usage of RecoilRoot:

import React from "react";
import {RecoilRoot} from "recoil";
import App from './App';

const RootComponent = () => {
return (
    <RecoilRoot>
        <App/>    
    </RecoilRoot>
    );
};

export default RootComponent;

In this example, RecoilRoot wraps the main App component, providing the context needed for Recoil to manage the state. By placing it at the top level, you ensure that all components within the App have access to Recoil's global state. This structure allows you to define and use Recoil atoms and selectors across different parts of your application.

  1. Atom

    In Recoil, an atom is a unit of state. It represents a piece of state that can be read from and written to by various components in your React application. Atoms act as shared pieces of state that can be used across different parts of your component tree.

Here's a simple example of defining an atom:

import {atom} from 'recoil';

export const countState = atom({
    key:'countState', // unique ID (with respect to other atoms/selectors)
    default: 0, // default value (aka initial value)
});

In this example, countState is an atom that represents a simple counter. The key is a unique identifier for the atom, and the default property sets the initial value of the atom.

once defined, you can use this atom in different components to read and update its value. Components that subscribe to the atom will automatically re-render when the atom's value changes, ensuring that your UI stays in sync with state. This makes atoms a powerful and flexible tool for managing shared state in Recoil-based applications.

Recoil Hooks

In Recoil, the hooks useRecoilState, useRecoilValue, and useSetRecoilState are provided to interact with atoms and selectors.

useRecoilState:

this hook returns a tuple containing the current value of the Recoil state and a function to set its new value.

Example:

const [count,setCount] = useRecoilState(countState);

useRecoilValue:

This hook retrieves and subscribes to the current value of a Recoil State.

  • Example:

  •     const count = useRecoilValue(countState);

  • useSetRecoilState:

  • This hook returns a function that allows you to set the value of a Recoil state without subscribing to updates.

  • Example:

  •     const setCount = useSetRecoilState(countState);

This hooks provide a convenient way to work with Recoil states in functional components. useRecoilState is used when you need both the current value and a setter function, useRecoilValue when you only need the current value, and useSetRecoilState when you want to set the state without subscribing to updates. They contribute to making Recoil-based state management more ergonomic and straightforward.

Selectors

In Recoil, selectors are functions that derive new pieces of state from existing ones. They allow you to compute derived state based on the values of atoms or other selectors. Selectors are an essential part of managing complex state logic in a Recoil application.

Here are some key concepts related to selectors:

  • Creating a Selector:

  • You can create a selector using a selector function from Recoil.

  • Example:

      import {selector} from 'recoil';

  const doubledCountSelector = selector({
      key:'doubledCount',
      get:({get}) => {
          const count = get(countState);
          return count * 2;
     }
  });

    Using Selectors in Components:

  • You can use selectors in your components using the useRecoilValue hook.

  • Example:

import {useRecoilValue} from "recoil";

const DoubledCountComponent = () => {
    const doubledCount = useRecoilValue(doubledCountSelector);

    return <div> Doubled Count: {doubledCount}</div>;
}

Atom and Selector Composition:

  • Selectors can depend on atoms or other selectors, allowing you to compose more complex state logic.

  • Example"

  •     const totalSelector = selector({
        key: 'total',
        get:({get}) => {
            const count = get(countState);
            const doubledCount = get(doubleCountSelector);
            return count + doubledCount;
        },
    });

    Selectors provide a powerful way to manage derived in a Recoil application, making it easy to compute and consume state values based on the current state of atoms.

Recoil Code Implementation

To create a Recoil-powered React application with the described functionality, follow the steps below:

  1. Install Recoil in your project:

     npm install recoil

    Set up your project structure:

Assuming a folder structure like this:

/src
    /components
        Counter.jsx
    /store/atoms
        countState.jsx
    App.jsx

Create countState.jsx in the atoms folder:

import {atom} from "recoil";

export const countState = atom({
    key:'countState',
    default: 0,
})

Create Counter.jsx in the components folder:

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { countState } from '../store/atoms/countState';

const Counter = () => {
    const [count,setCount] = useRecoilState(countState);
    const handleIncrease = () => {
        setCount(count + 1);
    };
    const handleDecrease = () => {
    setCount(count - 1);
    };

    const isEven = useRecoilValue(countIsEven);

    return (
    <div>
        <h1>Count : {count} </h1>
        <button onClick = {handleIncrease}> Increase </button>
        <button onClick = {handleDecrease}>Decrease </button>
        {isEven && <p> It is EVEN</p>}
    </div>
    );
};

export default Counter;

Create App.js :

// App.jsx
import React from 'react;
import { RecoilRoot } from 'recoil';
import Counter from './components/Counter';

function App() {
    return (
    <RecoilRoot>
        <Counter />
    </RecoilRoot>
    );
}

export deafault App;

Make sure to adjust your project's entry point to use App.js.

Now, your Recoil-powered React application should render a counter with increase and decrease buttons. The message "It is EVEN" will be displayed when the count is an even number.

Reactrecoilcontext APIProp Drilling