Proper State Management in React Components

A critical React anti-pattern is modifying state directly rather than using the proper state update methods. Here’s how to handle state correctly in both class and functional components:

The Problem

Incorrect (direct mutation):

// Class component
this.state.count = 5; // ❌ Direct mutation

// Functional component
const [user, setUser] = useState({ name: 'John' });
user.name = 'Jane'; // ❌ Direct mutation

Correct Solutions

For Class Components

// Use setState() for updates
this.setState({ count: 5 });

// For state derived from previous state
this.setState(prevState => ({
  count: prevState.count + 1
}));

For Functional Components

// Use the state setter function
const [count, setCount] = useState(0);
setCount(5);

// For objects/arrays, create new copies
const [user, setUser] = useState({ name: 'John' });
setUser({ ...user, name: 'Jane' });

Why Direct Modification is Problematic

1. Breaks React’s reactivity – Changes won’t trigger re-renders
2. Causes inconsistencies – Between what React tracks and actual state
3. Leads to bugs – Especially in concurrent rendering mode
4. Violates immutability principle – Core to React’s design

Common Scenarios

1. Updating Objects

// ❌ Wrong
state.user.name = 'New Name';

// ✅ Correct
setState({
  user: {
    ...state.user,
    name: 'New Name'
  }
});

2. Updating Arrays

// ❌ Wrong
state.items.push(newItem);

// ✅ Correct
setState({
  items: [...state.items, newItem]
});

3. Nested State Updates

// For complex state, consider splitting or using reducer
const [data, setData] = useState({
  user: { name: 'John', preferences: {} },
  settings: {}
});

// Update nested property
setData(prev => ({
  ...prev,
  user: {
    ...prev.user,
    name: 'Jane'
  }
}));

Performance Considerations

1. Shallow comparisons – React compares state by reference
2. Batched updates – Multiple setState calls may be batched
3. Functional updates – Important when new state depends on previous state

Advanced Patterns

1. Using Immer for Complex State

import produce from 'immer';

setState(produce(draft => {
  draft.user.name = 'Jane'; // Immer handles immutability
}));

2. useReducer for State Logic

const [state, dispatch] = useReducer(reducer, initialState);

function reducer(state, action) {
  switch (action.type) {
    case 'updateName':
      return { ...state, name: action.payload };
    // other cases
  }
}

Debugging Tips

If your UI isn’t updating:

1. Verify you’re using setState/state setters
2. Check for accidental mutations
3. Use React DevTools to inspect state
4. Look for console warnings about direct mutations

Migration Example

Before (bad):

class Counter extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.state.count++; // ❌ Direct mutation
  };
}

After (good):

class Counter extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState(prev => ({ count: prev.count + 1 }));
  };
}