DEV Community

Megha Ghotkar
Megha Ghotkar

Posted on

Understanding React's useState Hook

React's useState hook is a powerful tool that allows functional components to manage state.
In this brief guide, we'll explore the basics of useState with simple examples to help you grasp its usage quickly.
Understanding useState
In React, state represents data that can change over time and affects a component's rendering. Before hooks, class-based components were used for state management. Hooks, including useState, simplify state handling in functional components.
Basic Syntax:
The useState hook takes an initial state value and returns an array with two elements: the current state and a function to update that state. Here's how you can use it:
const [state, setState] = useState(initialState);
Example 1: Creating a Counter
Let's create a basic counter component using useState:


import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

useState(0) initializes count to 0.
setCount is the updater function for count.
• When the "Increment" button is clicked, it calls setCount to update the state, causing a re-render with the new value.

Example 2: Managing Input Fields
Let's create a component to manage an input field's value:

import React, { useState } from 'react';

function InputField() {
  const [text, setText] = useState('');

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

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleInputChange}
        placeholder="Type something..."
      />
      <p>You typed: {text}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

text manages the input field's value.
setText updates text when the input changes.
• The input value is controlled by text, and changes are reflected in the paragraph below in real-time.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more