React State and useState — Interactive UI (React 19+)

This lesson covers React state and the useState hook — how components remember data that changes over time and re-render when that data updates. You will handle events, update state safely, and build a small counter and like-button example.

Prerequisites: Lessons 1–3 (Introduction, Setup, JSX and Components) with a Vite React project. Estimated time: 45–55 minutes.

1. Props vs State

Props flow down from parent to child and never change inside the child. State is private data owned by a component — when state changes, React re-renders that component and its children with the new UI.

Rule of thumb: if data should change because the user clicked, typed, or a timer fired, it belongs in state (or a state library later). If data is configuration from a parent, use props.

2. The useState Hook

Import and call useState at the top of a function component:

import { useState } from 'react';

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

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

export default Counter;

useState(initialValue) returns a pair: the current value and a setter function. Always update state with the setter — never assign directly to count.

3. Handling Events

React uses camelCase event names and passes functions, not strings:

<button onClick={handleClick}>Click me</button>
<input onChange={(e) => setName(e.target.value)} />

Common events: onClick, onChange, onSubmit, onKeyDown. Prevent default form behavior with e.preventDefault() inside onSubmit.

4. Functional State Updates

When the next state depends on the previous state, pass a function to the setter:

setCount((prev) => prev + 1);

This avoids stale closures when multiple updates happen in one event or in async code — a common react usestate tutorial gotcha.

5. Multiple State Variables

Split unrelated data into separate useState calls:

const [likes, setLikes] = useState(0);
const [liked, setLiked] = useState(false);

For complex objects, you can use one state object, but prefer separate variables until you need to group them (or use useReducer in advanced apps).

6. Complete Example — LikeButton

Create src/LikeButton.jsx:

import { useState } from 'react';

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);
  const [liked, setLiked] = useState(false);

  function toggleLike() {
    setLiked((prev) => !prev);
    setLikes((prev) => (liked ? prev - 1 : prev + 1));
  }

  return (
    <button
      onClick={toggleLike}
      style={{
        padding: '0.5rem 1rem',
        borderRadius: '6px',
        border: '1px solid #e2e8f0',
        background: liked ? '#eff6ff' : '#fff',
        cursor: 'pointer',
      }}
    >
      {liked ? '♥' : '♡'} {likes} likes
    </button>
  );
}

export default LikeButton;

Wire it in App.jsx alongside your Lesson 3 components. Run npm run dev and confirm the count updates on each click.

7. Rules of Hooks

• Only call hooks at the top level of a function component — not inside loops, conditions, or nested functions
• Only call hooks from React function components or custom hooks
• Hook names start with use by convention

React 19’s compiler can optimize many patterns, but these rules still apply to useState, useEffect, and other hooks.

8. Next Steps

State makes UIs interactive. Next you will learn useEffect for side effects such as fetching data, subscribing to events, and syncing with the browser API.

Series: Lesson 3 · Lesson 5 — useEffect

Frequently Asked Questions

What is useState in React?
useState is a hook that adds local state to a function component. It returns the current value and a function to update it, triggering a re-render.

Why does my React state not update immediately?
State updates are asynchronous and batched. Use the functional setter form setCount(c => c + 1) when the next value depends on the previous one.

Can I use useState for objects and arrays?
Yes. When updating objects or arrays, create a new copy (spread or map) instead of mutating the existing value — React compares by reference.