React State Not Updating - Component Doesn't Re-render
You update React state with setState() or useState hook, but the component doesn't re-render. The state seems to update in DevTools but the UI doesn't change.
This happens with objects and arrays particularly.
Error Messages You Might See
Common Causes
- Mutating state directly instead of creating new reference: state.obj.prop = newValue (WRONG)
- Not creating new array/object: setState([...state, item]) works, state.push(item) doesn't
- Setting state to same reference (React sees no change): setState(state)
- Async state update where component unmounts before update
- setState in useCallback without dependency causing stale closures
How to Fix It
Always create new references: setState({...state, key: newValue}) for objects
For arrays: setState([...state, newItem]) or setState(state.filter(...))
Use immutable patterns: setState(prev => ({...prev, key: value}))
Check DevTools - if state actually updates but UI doesn't, it's an immutability issue
For complex state: consider useReducer for clearer intent
Real developers can help you.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
Why doesn't setState work with objects?
React compares references. If you mutate the same object, it looks unchanged. Create new reference: {...state, prop: value}
What's the difference between setState(state) and setState({...state})?
setState(state) doesn't trigger re-render because reference didn't change. setState({...state}) creates new reference
Should I always use ...state?
Yes, when you're changing properties. For full replacement, setState(completeNewValue) is fine