setState(state + 1) vs setState(() => state + 1)

출처: ChatGPT

React에서 setState 함수는 상태를 업데이트하는 데 사용됩니다. setState를 호출하면 React는 컴포넌트를 다시 렌더링하고 새로운 상태로 업데이트합니다. 그러나 setState는 비동기적으로 동작하며, 여러 상태 업데이트 호출이 동시에 발생하는 경우 예상치 못한 동작이 발생할 수 있습니다.

setState함수가 비동기적으로 동작할 때, 발생할 수 있는 이점
React의 setState는 비동기로 동작하며, 여러 번의 상태 업데이트를 하나의 업데이트로 결합하여 처리합니다. 이러한 결합은 성능상의 이점을 제공합니다.

setState(state + 1)은 이전 상태 값을 직접 참조하여 1을 더한 값을 새로운 상태로 설정하는 방식입니다. 예를 들어, 현재 상태가 3이라면 setState(state + 1)은 새로운 상태를 4로 설정합니다. 그러나 이 방식은 상태 업데이트의 안정성을 보장하지 않을 수 있습니다. 여러 setState 호출이 동시에 발생하면 React는 이러한 호출을 큐에 넣고 순차적으로 처리합니다. 따라서 두 개의 setState(state + 1) 호출이 거의 동시에 발생하면 첫 번째 호출은 이전 상태의 3을 기반으로 4를 설정하고, 두 번째 호출은 첫 번째 호출 이전의 상태값인 3을 기반으로 4를 설정하게 됩니다. 이로 인해 예상치 못한 결과가 발생할 수 있습니다.

반면에 setState(() => state + 1) 방식은 함수를 인자로 사용하여 상태를 업데이트합니다. 이 함수는 이전 상태 값을 인자로 받아서 새로운 상태 값을 반환합니다. React는 이 함수를 호출하고 반환된 값을 새로운 상태로 설정합니다. 이 방식은 이전 상태 값을 정확하게 참조하고 상태를 업데이트하므로 상태 업데이트의 안정성을 보장합니다. 함수를 사용하면 이전 상태 값이 최신 상태가 되도록 보장하고, 여러 상태 업데이트 호출이 배치로 처리되더라도 올바른 결과를 얻을 수 있습니다.

setState를 호출하면 일반적으로 새로운 상태 객체가 생성되지만, 함수형 업데이트를 사용할 경우에는 이전 상태 객체와 동일한 주소를 갖는 새로운 상태 객체가 생성됩니다.

따라서, setState(() => state + 1) 방식을 사용하는 것이 안전하고 권장되는 방식입니다. 이 방식을 사용하면 예상치 못한 동작이나 상태의 일관성이 깨지는 문제를 피할 수 있습니다.

setState(() => state + 1)의 성능상의 이점

const onRemove = useCallback(
  id => {
    setTodos(todos.filter(todo => id !== todo.id));
  },
  [todos]
);

위 onRemove함수를 보면 todos가 업데이트 될 때마다 useCallback이 호출되게 된다.
하지만 아래 코드에서, 함수형 업데이트를 사용함으로써 onRemove가 다시 호출되는 상황을 막을 수 있다.

const onRemove = useCallback(
  id => {
    setTodos(todos => todos.filter(todo => id !== todo.id));
  },
  []
);