React | Context API vs Zustand

Hello my fellow developers, today we will be discussing about react context api and zustand.

Introduction

• React’s useContext is a built-in hook that allows you to share state across your application without passing props down manually at every level.

• Zustand is a small, fast, and scalable bearbones state management library that aims to provide a more straightforward way of managing global state in React applications.

Overview of useContext

What is useContext?

useContext is a React hook that allows you to consume context values without the need to wrap components in Context.Consumer.

How to Use useContext

1. Create a context

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('default value');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

2. Consume a context

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new value')}>Change State</button>
    </div>
  );
};

Use Cases:

• Sharing state across many components

• Avoiding prop drilling

Overview of Zustand

What is Zustand?

Zustand is a small, fast, and flexible state management library that uses hooks for managing state in React applications. It is more lightweight and easier to use than some of the more comprehensive state management solutions like Redux.

How to Use Zustand

1. Install Zustand:

npm install zustand

2. Create a store

import create from 'zustand';

const useStore = create((set) => ({
  state: 'default value',
  setState: (newState) => set({ state: newState })
}));

3. Consume the store

const MyComponent = () => {
  const { state, setState } = useStore();

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new value')}>Change State</button>
    </div>
  );
};

Use Cases

• Global state management

• Small to medium-sized applications

• Performance-critical applications

Differences Between useContext and Zustand

Persisting State with Zustand

Install Zustand Middleware:

npm install zustand zustand/middleware

Create a persisted store

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      state: 'default value',
      setState: (newState) => set({ state: newState })
    }),
    {
      name: 'my-store', // unique name
      getStorage: () => localStorage // use localStorage or sessionStorage for persistence
    }
  )
);

Consume the store as usual

const MyComponent = () => {
  const { state, setState } = useStore();

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new value')}>Change State</button>
    </div>
  );
};

Pros and Cons of useContext

Pros

• Built-in: No need for external libraries.

• Simple API: Easy to understand and use.

• Integrated: Works seamlessly with other React features.

Cons

• Performance: Can cause unnecessary re-renders.

• Scalability: Not suitable for large applications.

• Boilerplate: Requires a lot of boilerplate for complex state.

Pros and Cons of Zustand

Pros

• Performance: Optimized for minimal re-renders.

• Scalability: Better for larger applications.

• Flexibility: More features for complex state management.

• Simplicity: Simple API and minimal boilerplate.

Cons

• External Dependency: Requires an additional library.

• Learning Curve: May have a slight learning curve for new users.

Conclusion

While useContext is a powerful tool for simple state sharing in React, Zustand offers a more efficient and scalable solution for managing global state, especially in larger applications. By replacing useContext with Zustand, you can achieve better performance and maintainability.

THANK YOU FOR CHECKING THIS POST
You can contact me on –
Instagram – https://www.instagram.com/supremacism__shubh/
LinkedIn – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email – shubhmtiwri00@gmail.com

You can help me with some donation at the link below Thank you👇👇
☕ –> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

Button Component with CVA and Tailwind

Shubham Tiwari ・ Feb 12

#nextjs
#react
#webdev
#typescript

08:22

MicroFrontend – React | Solid | Vue

Shubham Tiwari ・ Jan 9

#tutorial
#webdev
#beginners
#learning

15:48

Codium | AI Assistant for DEVs

Shubham Tiwari ・ Jan 4

#vscode
#learning
#tutorial
#beginners

05:25

Zustand – A beginners guides

Shubham Tiwari ・ Nov 21 ’23

#webdev
#tutorial
#react
#javascript