How to update state in React

Thursday, October 9, 2025

Updating state properly in React is fundamental for creating responsive and predictable user interfaces that trigger re-renders when data changes. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented state updates in thousands of React components for form handling, data manipulation, and user interactions across enterprise applications. From my expertise, the most effective approach is to use the setState function with immutability patterns. This method ensures proper React re-renders, maintains state history for debugging, and prevents common bugs related to state mutations.

Use the setState function with immutability patterns to properly update React state and trigger re-renders.

import { useState } from 'react'

function StateUpdate() {
  const [count, setCount] = useState(0)
  const [user, setUser] = useState({ name: '', email: '' })
  const [items, setItems] = useState([])

  // Simple updates
  const increment = () => setCount(count + 1)
  const incrementSafely = () => setCount(prev => prev + 1)

  // Object updates (immutable)
  const updateUser = (name) => {
    setUser({ ...user, name })
  }

  // Array updates
  const addItem = (text) => {
    setItems([...items, { id: Date.now(), text }])
  }

  const removeItem = (id) => {
    setItems(items.filter(item => item.id !== id))
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={incrementSafely}>Increment Safely</button>

      <input
        value={user.name}
        onChange={(e) => updateUser(e.target.value)}
        placeholder="Name"
      />
    </div>
  )
}

State updates in React must be immutable - never modify the existing state directly. Use the spread operator (…) to create new objects and arrays. For functional updates, pass a function to setState that receives the previous state, which is safer for updates that depend on the current state. When updating nested objects, spread each level of nesting.

Best Practice Note:

This is the same approach we use in CoreUI React components for reliable state management and optimal re-rendering performance.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.