Calling setState() with a function but not using previous state

A common React anti-pattern is using the functional form of setState() (or state setters in hooks) without actually utilizing the previous state parameter. This unnecessarily complicates code and can sometimes lead to subtle bugs.

The Problem

// ❌ Unnecessary functional form
const [count, setCount] = useState(0);

function increment() {
  setCount(prevCount => 5); // Ignores prevCount
}

// ❌ Similarly in class components
this.setState(prevState => ({
  count: 10 // Doesn't use prevState
}));

Why this is problematic:

1. Defeats the purpose of functional updates
2. Makes code harder to read and understand
3. Can cause race conditions in rare cases
4. Wastes the potential of the functional update pattern

Correct Solutions

1. Simple Value Update (When Not Using Previous State)

// ✅ Better - direct value when not using previous state
const [count, setCount] = useState(0);

function resetCounter() {
  setCount(0); // Direct value
}

2. Proper Functional Update (When Using Previous State)

// ✅ Correct functional update
const [count, setCount] = useState(0);

function increment() {
  setCount(prevCount => prevCount + 1); // Actually uses prevCount
}

3. Class Component Example

// ✅ Proper usage in class component
this.setState({ count: 10 }); // When not using prevState

// ✅ When using prevState
this.setState(prevState => ({
  count: prevState.count + 1
}));

When to Use Functional Updates

Functional updates are essential when:

1. State updates depend on previous state
2. Multiple updates might be batched
3. Working with closures in event handlers

// ✅ Necessary functional update
function handleClick() {
  setCount(prev => prev + 1); // Correct
  setCount(prev => prev + 1); // Will increment twice
}

// ❌ Without functional update
function badClick() {
  setCount(count + 1);
  setCount(count + 1); // Will only increment once
}

Common Misuses

1. Unnecessary functional form:

   setState(prev => newValue); // When newValue doesn't depend on prev

2. Ignoring previous state in derived updates:

   setState(prev => {
     // Doesn't use prev but returns new state
     return { ...defaultState };
   });

3. Mixing patterns inconsistently:

   // Some updates use functional form, others don't
   setCount(count + 1);
   setCount(prev => prev + 1);

Performance Considerations

1. Functional updates are slightly more expensive when not needed
2. No actual performance penalty in modern React
3. Readability impact is the main concern

Best Practices

1. Use direct values for simple state replacements
2. Use functional updates when:

• New state depends on old state
• Multiple updates might occur
• Working with closures

1. Be consistent within a component
2. Consider useReducer for complex state logic

// When state becomes complex, consider reducer
const [state, dispatch] = useReducer(reducer, initialState);

// More explicit state management
dispatch({ type: 'increment' });