Mastering React Hooks: A Beginner's Guide to useState

?? UseCase of UseState

React Hooks introduced a powerful way to handle state in functional components. Today, let's dive into one of the most commonly used hooks: useState. Whether you're just starting with React or brushing up your skills, understanding useState is fundamental.

?? What is useState?

The useState hook allows you to add state to functional components. Before hooks, state management was only possible in class components. Now, useState gives functional components the power to store and update data dynamically. Here's how it works:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
          Click me
     </button>
    </div>
  );
}        

?? Breakdown:

• useState(0) initializes state with the value 0. The useState hook returns two values:

1. count: the current state.
2. setCount: a function to update the state.

• The button triggers setCount(count + 1), updating the state and re-rendering the component.

? Important Concepts to Master:

• Initial State Value The argument passed to useState (0 in the example) is the initial state. This can be any type—number, string, array, object.
• State Update Doesn’t Merge Automatically Unlike class components, state in functional components doesn't merge automatically. So, when you're updating part of an object, you need to spread the existing state:

const [user, setUser] = useState({ name: 'John', age: 25 });

const updateAge = () => {
  setUser((prevUser) => ({
    ...prevUser, // keep other properties
    age: 26,
  }));
};        

• Lazy Initialization When initializing state, if it involves expensive calculations, you can pass a function to useState that only runs on the initial render:

const [count, setCount] = useState(expensiveComputation()); // wrong ?
const [count, setCount] = useState(() => expensiveComputation()); // lazy init ?        

• State Updates are Asynchronous Updates to state are batched in React, which means you shouldn't rely on the current state when computing new values. Always use the previous state as shown below:

setCount(count + 1);  // it will give you wrong value(old value) ?
setCount((prevCount) => prevCount + 1); // it will give you updated value ?        

• Multiple useState Calls You can call useState multiple times in a single component to manage different pieces of state independently:

const [name, setName] = useState('John');
const [age, setAge] = useState(25);        

? Best Practices:

• Keep state minimal: Only store what's necessary for rendering.
• Use lazy initialization for complex calculations: Avoid slowing down your component on every render.
• Separate concerns: Use multiple useState hooks for independent pieces of state instead of combining them into one object.

???? Practical Example: Toggling Visibility

Let’s take a quick example where we toggle the visibility of a text:

function ToggleText() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'} Text
      </button>
      {isVisible && <p>This is some text!</p>}
    </div>
  );
}        

This example toggles the display of text using useState by updating the isVisible state.

?? Conclusion:

useState is one of the most versatile and essential hooks in React. Whether managing simple counters or complex objects, mastering useState will help you write clean, maintainable functional components.

?? Tip: Always remember to consider performance with lazy initialization and rely on the previous state for updates. Happy coding!

?? What Next?

Now that we know how to store values and re-render the ui to see changes, what if we want to store something that doesn't require re-render? Hint: The next hook also helps with manipulating DOM!