React useState Hook

What is useState Hook in React?

useState adds a piece of state to a function component. It returns an array of exactly two items: the current value and a setter function. Calling the setter tells React to re-render the component with the new value.

Why useState Hook matters

State is what makes a page interactive. Counters, form fields, open/closed menus, fetched data and loading flags are all state — anything the component must remember between renders and re-render when it changes.

useState Hook example

import { useState } from 'react';

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

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

How this works

useState(0) sets the initial value on the first render only; on later renders React ignores the argument and returns the stored value. Array destructuring names the pair — count and setCount are conventional, but any names work.

Lazy initial state for expensive setup

// BAD: parseHeavy() runs on EVERY render, result thrown away after the first.
const [data, setData] = useState(parseHeavy(raw));

// GOOD: pass a function — React calls it only on the first render.
const [data, setData] = useState(() => parseHeavy(raw));

Key points to remember

• Call hooks at the top level of the component, never inside conditions or loops.
• You can have as many useState calls as you like — React keeps them in call order.
• State updates are asynchronous; the variable does not change until the next render.
• Pass a function to useState for an expensive initial value.

Common mistakes with useState Hook

• Reading count immediately after setCount and expecting the new value.
• Mutating state directly (arr.push(x)) instead of creating a new array.
• Calling useState inside an if block, which breaks the hook order between renders.