DEV Community: Abinash Ray Yadav

Improving State Management in React: Transitioning from ContextAPI to Recoil

Abinash Ray Yadav — Sat, 29 Jun 2024 13:05:58 +0000

When managing state in React applications, Recoil and the Context API both help share data across components, but they handle performance and scalability differently.

With the Context API, every time the context value changes, all components using that context re-render. This can lead to performance issues, especially in larger applications, because React lacks built-in dependency tracking for context.

Recoil, on the other hand, excels in efficiently managing state for large-scale applications. It uses a sophisticated dependency graph to track state changes, ensuring only components that rely on the changed state re-render. Recoil introduces atoms, which are the fundamental building blocks for state management. Atoms act as the central source of truth for individual pieces of data, providing a clear and detailed approach to managing state.

Getting Started with Implementation:

2. Defining an Atom

Use the atom function to create your atom. Provide a key (a unique string) to identify the atom within your Recoil state and a default initial value the atom will hold.

import { atom } from 'recoil';

export const myAtom = atom({
  key: 'UniqueAtomKey',
  default: 'Initial value, e.g., an array, object, etc.',
});

3. Accessing Atom value

Recoil provides with two hooks: useRecoilValue and useRecoilState to access and manipulate data.

import { useRecoilState, useRecoilValue } from 'recoil';
import { myAtom } from './pathToYourAtom';

const [data, setData] = useRecoilState(myAtom);
const myValue = useRecoilValue(myAtom);

Moreover, recoil provides selectors hooks to allows you to derive state from existing atoms. They essentially act as pure functions that transform data based on your needs.

import { selector } from 'recoil';

const deriveDataSelector = selector({
  key: 'deriveDataSelector',
  get: ({ get }) => {
    const data = get(myAtom);
    // manipulate data
    return manipulatedData;
  },
});

const filteredData = useRecoilValue(deriveDataSelector);  // usage

Similarly, selectors can be used to handle async query.

import { atom, selector } from 'recoil';

export const myAtom = atom({
  key: 'UniqueAtomKey',
  default: selector({
    key: 'CurrentUserName',
    get: async ({ get }) => {
      const response = await anyAsyncOperation();
      return response.json();
    },
  }),
});

This holds neet for single component atom accessing. But problem arise when multiple component wants same sort of atom definition. Then each component need to have unique atom and its coresponding unique key. Defining each new atom could be tedious and repeatitive. In that case atomFamily comes into play to dynamically generate multiple instances of that atom with unique keys.

import { atomFamily } from 'recoil';

const myAtomFamily = atomFamily({
  key: 'myAtomFamilyKey',
  default: 'anyDefaultValue',
});

Just like selector comes with atom, selectorFamily comes with atomFamily.

import { selectorFamily } from 'recoil';

const asyncQuery = selectorFamily({
  key: 'asyncQueryKey',
  get: (params) => async () => {
    const response = await anyDBQuery(params);
    if (response.error) {
      throw response.error;
    }
    return response.data;
  },
});

Recoil offers a powerful and scalable solution for state management in React applications. Its fine-grained control, efficient re-rendering, and advanced features like atom families make it a compelling choice for complex projects.

Explore about atom in depth LINK!!!

This array of features gives developers plenty to explore and implement in their applications.

                🚀 Happy Coding! 🌟

Improving State Management in React: Transitioning from Prop Drilling to ContextAPI

Abinash Ray Yadav — Thu, 27 Jun 2024 20:13:48 +0000

Whenever people start learning React, they inevitably encounter the challenge of handling props. Props are essential for passing data from parent to child components, enabling the creation of dynamic and reusable UI elements. However, as applications grow in complexity, developers often face a common hurdle known as prop drilling. This occurs when props must traverse multiple intermediary components to reach deeply nested children. In this article, we will explore the pitfalls of prop drilling and discuss how modern state management solutions, such as Recoil, can simplify and enhance your React development experience.

Let's begin with a product list prop drilling example:

Components Breakdown:
App Component:

function Home() {
  const [data, setData] = useState<Array<Product>>([]);
  const [loading, setLoading] = useState<boolean>(true);

  async function loadData()
  {
    const res = await fetch("https://fakestoreapi.com/products");
    let json = await res.json();
    json = json.slice(0, 3);
    setData(json);
    setLoading(false);
  }

  useEffect(() => {
    loadData();
  }, []);

  return (
  <main className="min-h-screen flex items-center justify-center">
    {loading ? <div>Loading...</div> : <ShoppingList products={data}/>}
  </main>);
}

Shopping list Component:

function ShoppingList({products}: {products: Array<Product>})
{
    return (
        <div className="flex gap-3 items-stretch">
            {products && products.map(product=> <ProductCard product={product}/>)}
        </div>
        )
}

Product Component:

function ProductCard({product}: {product: Product}){
  return (
  <div>
      <div className="bg-white border border-yellow-700 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 w-72 h-96">
                  <img className="py-8 rounded-lg h-52 pl-20" src={product.image} alt="product image" />

              <div className="px-5">
                      <h5 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">{product.title}</h5>


                  <div className="flex items-center mt-2.5 mb-5">
                      <Star rating={product.rating.rate}/>
                      <span className="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-3">
                          {product.rating.rate}
                          </span>
                  </div>


                  <div className="flex items-center justify-between">
                      <span className="text-3xl font-bold text-gray-900 dark:text-white">${product.price}</span>
                      <div className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add to cart</div>
                  </div>
              </div>
      </div>
  </div>)
}

Star Component

function Star({rating}: {rating: number}){
  let noRating = 5 - Math.floor(rating);
  return (
      <>
          <div className="flex items-center space-x-1 rtl:space-x-reverse">


              {Array.from({ length: rating }).map((_, index) => (<svg className="w-4 h-4 text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                  <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
              </svg>))}

              {Array.from({ length: noRating }).map((_, index) => (<svg className="w-4 h-4 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                  <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
              </svg>))}
          </div>
      </>
  )
}

This leads to unnecessary re-renders of components involving props and impact performance. Sometimes passing props to component without context of usage leads to debugging more difficult, as it is harder to trace the flow of data through the component tree.

To address the issues associated with prop drilling, several alternatives can be used and React Context API allows you to create a context and share data across the component tree without passing props explicitly at every level.

Setting up for ContextAPI:

1. Creating context

import { createContext } from "react";
import { Product } from "../types/types.next";

export const ProductContext = createContext<Product[] | null>(null);

2. Wrap the Context Provider around Parent div

export default function Home() {
  const [data, setData] = useState<null | Product[]>(null);
  const [loading, setLoading] = useState<boolean>(true);

  async function loadData()
  {
    const res = await fetch("https://fakestoreapi.com/products");
    let json = await res.json();
    json = json.slice(0, 3);
    setData(json);
    setLoading(false);
  }

  useEffect(() => {
    loadData();
  }, []);

  return (
  <main className="min-h-screen flex items-center justify-center">
    {loading ? <div>Loading...</div> : <ProductContext.Provider value={data}> <ShoppingList/> </ProductContext.Provider>}
  </main>);
}

3.Use useContext hook to use data

function ShoppingList()
{
  const products = useContext(ProductContext);
    return (
        <div className="flex gap-3 items-stretch">
            {products && products.map(product=> <ProductCard product={product}/>)}
        </div>
        )
}

That's how we got global point of management for our props facilitating simplified component communication. But this comes with costs. Context providers trigger a re-render in all consuming components whenever the context value changes, regardless of whether the component actually uses that part of the context. This can lead to unnecessary re-renders and impact performance, especially if the context value changes frequently.

It leads to path for consideration of dedicated state management library like Redux or Recoil might better suit your application's needs, especially for complex global state management scenarios.