React useState: A Beginner’s Guide with Examples

React useState hook is a powerful tool that enables developers to manage state in functional components. This hook allows developers to update the state of a component and rerender the view whenever a change occurs. In this article, we will explore the basics of useState and provide examples of where it can be used.

What is useState?

useState is a built-in React hook that allows developers to manage state within a functional component. It returns an array containing two elements: the current state value and a function to update the state. The initial state can be set as an argument to the React useState function.

Syntax: const [state, setState] = useState(initialState);

Example:

import React, { useState } from 'react';

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

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

In the example above, we declare a state variable called count and initialize it with the value of 0. We also declare a function called setCount that updates the count variable. The setCount the function is used in the button’s onClick handler to increment the count variable by one.

Where to use useState?

The useState hook can be used in a wide range of scenarios. Here are some examples of where you can use it:

1. Counters and Incrementers Counters and incrementers are common use cases for useState. In the example above, we created a simple counter that increments the count value when the button is clicked.
2. Forms often require state management to keep track of input values. The useState hook can be used to store the current value of the input and update it whenever the user types something in.

Example:

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    // do something with the form data
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="Enter your username"
      />
      <input
        type="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
        placeholder="Enter your password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

In the example above, we created a simple login form that uses the useState hook to store the current values of the username and password inputs. The handleSubmit function is called when the user submits the form, and it can be used to perform validation or send the form data to a server.

3. Toggling Boolean Values Boolean values can be easily toggled using useState. In the example below, we create a simple toggle button that toggles the visibility of some text.

Example:

import React, { useState } from 'react';

function ToggleButton() {
  const [isVisible, setIsVisible] = useState(false);

  function handleClick() {
    setIsVisible(!isVisible);
  }

  return (
    <div>
      <button onClick={handleClick}>Toggle</button>
      {isVisible && <p>Hello, World!</p>}
    </div>
  );
}

In the example above, we declare a state variable called isVisible and initialize it with the value false. We also declare a function called toggleVisibility that will toggle the value of isVisible between true and false when called.

Now let’s see how we can use useState to manage the state of a counter in a component. We can create a simple counter component that displays a number and two buttons, one to increment the number and one to decrement it. Here is the code for the component:

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

In this example, we declare a state variable called count and initialize it with the value 0. We also declare two functions, increment and decrement, which will update the value of count by adding or subtracting 1, respectively, when called.

We use the useState hook to create the state variable count and the function setCount, which we call inside the increment and decrement functions to update the state. When the state is updated, React will automatically re-render the component with the new state value.

We can also use useState to manage the state of a form. For example, we can create a simple form component that allows a user to enter their name and email address and displays a message when the form is submitted. Here is the code for the component:

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  function handleSubmit(event) {
    event.preventDefault();
    setSubmitted(true);
  }

  function handleNameChange(event) {
    setName(event.target.value);
  }

  function handleEmailChange(event) {
    setEmail(event.target.value);
  }

  return (
    <div>
      <h1>Form</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" value={name} onChange={handleNameChange} />
        </label>
        <br />
        <label>
          Email:
          <input type="email" value={email} onChange={handleEmailChange} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
      {submitted && <p>Form submitted successfully!</p>}
    </div>
  );
}

In this example, we declare three state variables: name, email, and submitted. We also declare three functions: handleSubmit, handleNameChange, and handleEmailChange.

The name and email state variables are initialized with empty strings, and are updated using the setName and setEmail functions when the user enters their name and email address into the form.

The submitted the state variable is initialized with the value false, and is updated using the setSubmitted function when the user submits the form.

We use the handleSubmit function as the onSubmit handler for the form. When the form is submitted, we set the new todo item using setTodoList by adding the new todo object to the existing todo list. We also reset the input field by setting the todoInput value to an empty string.

The final step is to render the todo items and the form. We use the map function to loop through the todo list and render each todo item as a list item. For each item, we display the todo text and a delete button that removes the item from the list when clicked. Finally, we render the form with the input field and the submit button.

The above example demonstrates how we can use the useState hook to manage the state of a todo list in a React component. The same technique can be used to manage any type of state in a component, such as user input, loading states, and more.

Conclusion

In conclusion, a useState hook is a powerful tool in React that allows us to add stateful behavior to functional components. With its simple API and flexible nature, it is a great choice for managing state in React applications.

I hope this article has provided a clear understanding of the useState hook and its usage with examples. Whether you are a beginner or an experienced developer, understanding this hook is essential for building robust React applications.