Eğitim / Kodlama 15 Mayıs 2024

Zustand vs useState – How to Manage State in React Apps

Zustand vs useState – How to Manage State in React Apps

State management in React applications has evolved a lot in recent years, especially with the advancement of functional state and the introduction of hooks.

Developers have more flexibility and state management has generally become simpler. But as applications grow, they become more complex to manage – and you may find yourself needing a more robust state management solution.

React hooks provide built-in solutions to managing the state of your applications – for example, with the useState() hook. But there are other libraries like MobX, Zustand, and Recoil that ca help make state management easier.

In this article, I’ll focus on Zustand and compare it with the useState() hook. You can check out a comparison of useState() and Redux here if you want to learn more about Redux and how it compares to useState().

To get started, I want to make sure you understand how both useState() and Zustand work. Then we’ll compare them to see which is a better solution for your project.

Prerequisites

Before you begin coding, please ensure you have the following:

How to Use useState() for State Management

Overview of useState hook

useState() is a built-in React Hook that allows functional components to manage state without using class components. It provides a simple way to declare state variables and update them within functional components.

For more information on the useState() hook, you can check out this tutorial. It will provide you with detailed insights and examples related to useState() in React.

Basic usage and syntax

The syntax for useState() is straightforward. It takes an initial state as an argument and returns an array with the current state value and a function to update that value.

const [text, setText] = useState();
useState() syntax

Let’s look at an example of how to use useState().

Initial state of the application:



const Usestate = () => {


  return (
    <div className='container'>
      <h1>
       State management using useState()
      </h1>
      <br />
      <div className='input'>
        <input
          type='text'
          className='input'
        />
        <button>
          Change Color
        </button>
      </div>
    </div>
  );
}

export default Usestate;

In the above code, we have a React component named Usestate. It renders a simple interface with a heading “State management using useState()”, a text input field, and a button labeled “Change color”.

Here’s the result of that code:

Zustand vs useState – How to Manage State in React Apps
Initial state of the application

Now, let’s add useState() and making it functional. Here’s the code:

import { useState } from "react";

const Usestate = () => {
  const [text, setText] = useState('black');
  const [color, setColor] = useState('black'); // Another state to store the chosen color by the user

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  // A function has been declared
  const handleButtonClick = () => {
    setColor(text); // it updates the chosen color when the button is clicked
  };

  return (
    <div className='container'>
      <h1 style={{color:color}}>
        State management using useState()
      </h1>
      <br />
      <div className='input'>
        <input
          type='text'
          className='input'
          value={text}
          onChange={handleInputChange}
        />
        <button className='btn' onClick={handleButtonClick}>
          Change Color
        </button>
      </div>
    </div>
  );
}

export default Usestate;



An example showing the state of an application using Usestate() 

In the above code, the state variable text is set to the initial state (color) using useState(). The setText function is set to update the value of color when the button is clicked.

The second state defined stores the color update from the user. So the text color remains unchanged until the button is clicked. Once the button is clicked, the color state updates with text value, changing text color to what the user types.

Here’s the result:

Zustand vs useState – How to Manage State in React Apps
Addition of useState() to the application

Pros and cons of useState()

Pros:

  • Built-in to React, so no need for additional dependencies.
  • Simple and intuitive API, easy to understand and use.

Cons:

  • Limited to managing local component state.
  • Can lead to prop drilling in deeply nested components which can cause confusion if you don’t understand prop drilling.
  • Complex state management scenarios may require additional logic to handle.

To learn more about useState() and other functional hooks check out this article: Simplify your React programming effortlessly with these 8 amazing hooks.

How to Use the Zustand Library for State Management

Overview of Zustand

Zustand is a handy state management tool for managing state in React apps. It’s small, works quickly, and grows with your needs.

With Zustand, you can create and update states globally that can be easily shared between different parts of your app. It’s like having a central hub for your app’s information, making it simple to organize and access data from anywhere in your application.

Zustand basic usage and syntax

To get started with Zustand, follow these steps:

First, start by installing Zustand in your React application using the command:

npm install zustand
// or
yarn add zustand
install Zustand

Next, in your React application, navigate to the src directory and create a new folder called store.

Inside the store folder, create a file named color.js (or any preferred name). This a JavaScript file to define your state.

Zustand vs useState – How to Manage State in React Apps
Architecture of your React application

Then, in that color.js file, import the create function from Zustand to begin setting up your state management:

import { create } from zustand
importing create function

We’re going to use the create function to build a custom hook, which acts as the main access point to our store.

The  color.js file is where  we’ll keep all our state values and the actions. Think of actions as the updated values. It’s similar to how you use useState().

import { create } from 'zustand';

// Create a custom hook called useColor
export const useColor = create((set) => ({
  // Initial state: text and color both set to 'black'
  text: 'black',
  color: 'black',

  // Function to update text state
  setText: (text) => set({ text }),

  // Function to update color state
  setColor: (color) => set({ color }),
}));
The store defining your state in one place

Let’s go over what this code is doing:

  • This code creates a special tool (a hook) called useColor using Zustand.
  • The useColor tool helps keep track of two things: the text and the color.
  • At the start, both the text and the color are set to “black”.
  • There are two other tools inside useColor: setText, which is used to change the text to whatever we want, and setColor, which is used to change the color to any color we choose.

Creating this store involves defining it in a file. This makes it reusable throughout your whole app and makes it global. It removes the need to worry about passing props.

Then you need to pass it to your component to be used:

// First we will import useColor from a folder named 'store'
import { useColor } from '../store/color';


const UseZustand = () => {
  // we will bring in the functions we defined in color.js and destructure it so we can use it in our component
    // pass a state into the custom hook we created; this state will now be used to set and update the values
  const { text, color, setText, setColor } = useColor((state) => ({
    text: state.text,
    color: state.color,
    setText: state.setText,
    setColor: state.setColor,
  }));


  const handleInputChange = (e) => {
    setText(e.target.value);
  };
    
    
//Function defined for the button
// When the button is clicked, we use setColor to change the color to what we typed
  const handleButtonClick = () => {
    setColor(text);
  };

  
  return (
    <div className='container'>
      <h1 style={{ color: color }}>
        State management using Zustand
      </h1>
      <br />
      <div className='input'>
        <input
          type='text'
          className='input'
          value={text}
          onChange={handleInputChange}
        />
        <button className='btn' onClick={handleButtonClick}>
          Change Color
        </button>
      </div>
    </div>
  );
};


export default UseZustand;

The components where you want to use a state

In summary:

  • We’re using a tool called useColor to keep track of text and color.
  • Inside our app section  UseZustand), we allow users to type something and change its color by clicking a button.

Here what the final output looks like:

Zustand vs useState – How to Manage State in React Apps
Applying zustand to the application

Pros and cons of Zustand

Pros:

  • Global state management without prop drilling.
  • Simple and concise for defining and accessing state.
  • Built-in support for middleware and devtools.

Cons:

  • Requires additional dependency compared to useState.
  • May introduce a learning curve for developers new to the library.

How Does Zustand Differ from useState?

Unlike useState(), Zustand allows developers to create and manage global state that can be accessed from any component in the application without prop drilling.

It offers a more centralized approach to state management.

Factors to consider when choosing between Zustand and useState

Here are some simple things to think about when choosing between Zustand and useState:

  • State Complexity: If your app’s state is simple, useState might be fine. But for more complex state needs, Zustand could be better.
  • Speed: Zustand is known for being fast, which is great if your app needs to be quick.
  • Team Skills: If your team already knows how to use React Hooks, useState might be easier. But if they’re open to learning something new, Zustand could be worth a try.
  • App Growth: Consider how your app might grow over time. Zustand’s centralized approach can make it easier to handle state as your app gets bigger.
  • Community Support: See what resources and help are available for Zustand and useState. A strong community can be  helpful.

Thinking about these things should help you decide. It will show you which state management option is best for your project.

What Are the Differences Between These Two State Management Tools?

The difference in the two tools lies in their feature with this you can make an informed decision.

Feature useState Zustand
Complexity Handling Good for simple state in one component Better for complex state shared across many components
State Scope Local to one component Global state that can be used by any component
Performance Works well for small tasks Designed to reduce re-renders
Ease of Use Very simple to start with, no setup needed Needs a bit more setup, more features but a bit harder to learn
Scalability Can get tricky as the app grows, often needs other tools for big apps Handles growth well, easier to manage state in big apps
Support and Tools Part of React, lots of help and info available, no extra libraries needed Separate library, good support, not as much info as useState but still good
Learning Curve useState is easier to learn Zustand has a slightly steeper learning curve due to its store creation process.

Use Cases

  1. For simple state management, useState() is often enough.
  2. Zustand offers advantages like centralized state and reducing prop drilling in complex apps.
  3. Regarding performance, Zustand is built to be fast and efficient. It’s made to reduce unneeded re-renders of your components. These can make your app run smoother.

Don’t know what to build with useState() or zustand? You can check out this very simple application built with React: Birthday Reminder. And here it is on my GitHub.

Conclusion

In conclusion, Zustand and useState() are both useful for managing state in React. They serve different purposes based on your project’s requirements and scale. You should understand the strengths and weaknesses of each approach in order to choose the best state management option for your app.

Have you used Zustand or useState() before? Share your experiences, insights, and tips on Twitter! Your input could make a real difference for other developers grappling with state management in React.

You can read the Zustand documentation to learn more.

If you found this article helpful, share it with others who may also find it interesting.

Stay updated with my projects by following me on Twitter and LinkedIn or check out my BioDrop.

If you enjoy what I do and want to show your support or want to show some💖, consider buying me a coffee☕ or checking out my e-Book for kids! Your support means a lot to me!

Keep learning, keep sharing, and happy coding!

Thank you for reading💖.


source

Spread the love <3

You may also like...

Nis
18
2024
0
Samsung, 512 GB’lık USB flash belleklerini tanıttı! İşte fiyatı ve özellikleri

Samsung, 512 GB’lık USB flash belleklerini tanıttı! İşte fiyatı ve özellikleri

Samsung Electronics, gelişmiş bellek teknolojilerine sahip BAR Plus ve FIT Plus USB 3.2 Gen 1 Flash bellek ailesine 512 GB...

Spread the love <3
May
14
2024
0
Google Pixel 9 serisi özellikleri ve canlı görselleri sızdırıldı!

Google Pixel 9 serisi özellikleri ve canlı görselleri sızdırıldı!

Bugün kullanıcılar, Google tarafından düzenlene teknoloji etkinliği Google I/O için beklerken, bazı sızıntılar Google’ın tanıtmaya hazırlandığı Pixel 9 serisi hakkında...

Spread the love <3
Nis
25
2024
0
FAQ: frequently asked parts of speech questions

FAQ: frequently asked parts of speech questions

What are the 8 parts of speech?In traditional grammar, the eight parts of speech are nouns, pronouns, verbs, adjectives, adverbs,...

Spread the love <3
Mar
20
2024
0
İstanbul ve çevre illerde hissedilen deprem meydana geldi!

İstanbul ve çevre illerde hissedilen deprem meydana geldi!

20 Mart 2024 tarihinde yerel saat ile 09:21:01’de İstanbul ve çevre illerini etkileyen bir deprem meydana geldi. T.C. İçişleri Bakanlığı...

Spread the love <3
Whatsapp İletişim
Merhaba,
Size nasıl yardımcı olabilirim ?