Proper State Updates in Event Listeners

When setting state inside event listeners in React, there are several common mistakes that can lead to bugs or performance issues. Here’s how to handle state updates correctly in various scenarios.

Common Mistakes

1. Using Current State Directly

// ❌ Problematic - may use stale state
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1); // Relies on current closure value
  };
}

2. Multiple State Updates

// ❌ Problematic - batches may cause issues
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1); // Same value as previous
  };
}

3. Async State Access

// ❌ Problematic - accessing state right after setState
function SearchBox() {
  const [query, setQuery] = useState('');

  const handleSearch = () => {
    setQuery('new query');
    search(query); // Uses old query value
  };
}

Correct Solutions

1. Functional Updates (Recommended)

// ✅ Correct - uses previous state
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };
}

2. Multiple Sequential Updates

// ✅ Correct - chains updates properly
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1); // Uses updated value
  };
}

3. Using Refs for Latest State

// ✅ Correct - access latest state in callbacks
function SearchBox() {
  const [query, setQuery] = useState('');
  const queryRef = useRef(query);

  useEffect(() => {
    queryRef.current = query;
  }, [query]);

  const handleSearch = () => {
    setQuery('new query');
    search(queryRef.current); // Uses ref instead
  };
}

Class Component Patterns

1. Correct State Updates

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

  // ✅ Correct - functional setState
  handleClick = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };
}

2. Multiple State Properties

class Form extends React.Component {
  state = { username: '', password: '' };

  // ✅ Correct - merges state properly
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };
}

Event Listener Best Practices

1. Use functional updates when new state depends on previous state
2. Batch related updates in a single setState call
3. Use refs when you need latest state in callbacks
4. Clean up listeners in useEffect return function
5. Debounce rapid updates for expensive operations

Performance Considerations

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    // ✅ Throttled event listener
    const handleScroll = throttle(() => {
      setScrollY(window.scrollY);
    }, 100);

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
}

Remember that state updates in React are asynchronous, and event handlers often need special consideration to handle state correctly. The functional update pattern is the most reliable way to ensure you’re working with the latest state values.