Setting state inside an async function without using functional updates

When working with React state updates inside asynchronous functions, it’s crucial to handle them correctly to avoid stale state issues and ensure consistency. Here’s how to properly manage state updates in async contexts.

The Problem with Direct State Updates

Problematic Approach:

const [count, setCount] = useState(0);

async function incrementAsync() {
  const result = await fetch('/api/increment');
  // ❌ Risky - uses potentially stale count value
  setCount(count + result.value);
}

Correct Solutions

1. Functional Updates (Recommended)

async function incrementAsync() {
  const result = await fetch('/api/increment');
  // ✅ Safe - uses latest state
  setCount(prevCount => prevCount + result.value);
}

2. Store Needed Values Before Async Operations

async function incrementAsync() {
  const currentCount = count; // Capture before async
  const result = await fetch('/api/increment');
  // ✅ Uses captured value
  setCount(currentCount + result.value);
}

3. Use Refs for Latest Values

const [count, setCount] = useState(0);
const countRef = useRef(count);

// Update ref whenever state changes
useEffect(() => {
  countRef.current = count;
}, [count]);

async function incrementAsync() {
  const result = await fetch('/api/increment');
  // ✅ Uses ref's current value
  setCount(countRef.current + result.value);
}

When to Use Each Approach

Approach	Best For	Caveats
Functional updates	Most cases	Cleanest solution
Value capture	Simple cases	Doesn’t handle rapid successive calls well
Refs	Complex cases	More boilerplate

Advanced Patterns

1. Combining with useReducer

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + action.payload };
    default:
      return state;
  }
}

function Component() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  async function incrementAsync() {
    const result = await fetch('/api/increment');
    dispatch({ type: 'increment', payload: result.value });
  }
}

2. Custom Hook Solution

function useAsyncState(initialValue) {
  const [state, setState] = useState(initialValue);
  const stateRef = useRef(initialValue);

  const getLatest = () => stateRef.current;
  const setAsyncState = (newValue) => {
    stateRef.current = newValue;
    setState(newValue);
  };

  return [state, setAsyncState, getLatest];
}

// Usage
const [count, setCount, getCount] = useAsyncState(0);

async function incrementAsync() {
  const result = await fetch('/api/increment');
  setCount(getCount() + result.value);
}

Common Pitfalls to Avoid

1. Multiple rapid updates – May overwrite each other
2. Async callbacks in effects – Need proper cleanup
3. State dependencies – Can cause infinite loops

Testing Async State Updates

// Using testing-library
test('increments count asynchronously', async () => {
  jest.spyOn(window, 'fetch').mockResolvedValue({
    json: () => Promise.resolve({ value: 5 })
  });

  const { getByText } = render(<MyComponent />);
  fireEvent.click(getByText('Increment'));

  await waitFor(() => {
    expect(getByText('5')).toBeInTheDocument();
  });
});

By properly handling state updates in async functions, you’ll avoid subtle bugs and ensure your application behaves predictably. The functional update pattern (setState(prev => newValue)) is generally the most reliable solution for most cases.