What Is React State? – A Quick Guide to the State Hook

React state is a component’s memory for storing data that React should remember during a component’s re-rendering and whose update should trigger a new render.

This post provides a snapshot of the comprehensive Code React Sweetly book. It serves as a quick reference guide.

Syntax

import { useState } from "react";

function App() {
  const [state, setState] = useState(initialState);

  // ...
}

state: The variable containing the component’s state value.
setState: A function for updating the state value.
useState: The state Hook for initializing and retrieving the component’s state.

Example

import { useState } from "react";

function AboutCompany() {
  const [age, setAge] = useState(5);

  function updateAge() {
    setAge(age + 1);
  }

  return (
    <div>
      <h3>CodeSweetly is {age} years old!</h3>
      <button type="button" onClick={updateAge}>
        Click to update age
      </button>
    </div>
  );
}

export default AboutCompany;

Try it on CodeSandbox

When a user clicks the button UI, the onClick event triggers the updateAge event handler, which uses the setAge setter function to update the component’s age state.

About the Full Guide

The Code React Sweetly book is a beginner-friendly yet in-depth guide. It takes you from the basics to the behind-the-scenes workings of the useState Hook, using live examples to explain the state management concept. Here are the main concepts it covers:

How React State works
Why the useState() Hook returns an array
Best practices for updating and resetting state efficiently
Behind-the-scenes mechanics of React state management
Hands-on examples (including a project)

Support CodeSweetly