How to update the state based on its current value in a React functional component?

Question

You have a functional component that uses the useState and useEffect hooks. What is the correct way to update the state based on its current value to avoid concurrency issues?

Accepted Answer

Using an updater function in setState:

````const [count, setCount] = useState(0);
setCount(prevCount => prevCount + 1);
```

Answer

Combining useState with useEffect:

```const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
}, [count]);```

Answer

Using the classic useState syntax:

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

Answer

Using the useReducer hook instead of useState:

```const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });
```

Question from the React ⚛️ test

How to update the state based on its current value in a React functional component?