How to Update State in React: Simple Guide with Examples

In React, you update state using the useState hook by calling its setter function with the new value. This triggers React to re-render the component with the updated state. Always use the setter function instead of modifying state variables directly.

Syntax

To update state in React, first declare state using useState. It returns a pair: the current state and a function to update it. Call the update function with the new state value to change state.

• const [state, setState] = useState(initialValue); declares state.
• setState(newValue); updates the state and triggers a re-render.

javascript

import React, { useState } from 'react';

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

  // Update state by calling setCount
  function increment() {
    setCount(count + 1);
  }

  return null;
}

Example

This example shows a button that updates a counter state when clicked. The displayed number updates automatically because React re-renders the component after state changes.

javascript

import React, { useState } from 'react';

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

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

Output

You clicked 0 times
[Button labeled 'Click me']

Common Pitfalls

Common mistakes when updating state include:

• Trying to modify state variable directly instead of using the setter function.
• Not using a function updater when new state depends on previous state, which can cause stale values.
• Forgetting that state updates are asynchronous and batching may occur.

Always use the setter function and prefer functional updates when relying on previous state.

javascript

import React, { useState } from 'react';

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

  // Wrong: directly modifying state variable (no re-render)
  function wrongIncrement() {
    // count = count + 1; // This does nothing to React state
  }

  // Right: use setter function
  function rightIncrement() {
    setCount(prevCount => prevCount + 1); // Functional update
  }

  return null;
}

Quick Reference

Remember these tips when updating state in React:

• Use const [state, setState] = useState(initialValue) to declare state.
• Call setState(newValue) to update state.
• Use functional updates setState(prev => newValue) when new state depends on old state.
• Never modify state variables directly.
• State updates cause React to re-render the component.

Key Takeaways

Always update React state using the setter function from useState.

Use functional updates when new state depends on previous state to avoid stale values.

Never modify state variables directly; React won't detect changes.

State updates trigger component re-rendering to reflect changes.

Remember state updates are asynchronous and may be batched.