Understanding the basics

React provides a powerful hook called useState for managing state in functional components. In this blog post, we will explore how to use useState and some common patterns.

useState Hook

The useState hook allows you to add state to functional components. It returns an array with two elements: the current state value and a function to update it.

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>
  );
}

In the above example, count is the state variable, and setCount is the function to update it. Try the interactive example below:

Initial State

You can pass an initial state value to useState. This value will be used as the initial state for the variable.

const [name, setName] = useState("John Doe");

In the above example, name is initialized with the value 'John Doe'.

Updating State

To update the state, call the state update function with the new value. React will re-render the component with the updated state.

const [age, setAge] = useState(25);
 
function increaseAge() {
  setAge(age + 1);
}

In the above example, calling increaseAge will update the age state and re-render the component.

Common Patterns

• Toggling State: Use useState to toggle boolean values.

const [isVisible, setIsVisible] = useState(false);
 
function toggleVisibility() {
  setIsVisible(!isVisible);
}

• Using Previous State: When updating state based on the previous state, use a function.

const [count, setCount] = useState(0);
 
function increment() {
  setCount((prevCount) => prevCount + 1);
}

Conclusion

Understanding how to use the useState hook is essential for managing state in React functional components. It allows you to add stateful logic to your components in a clean and concise way.

Happy coding!