매개변수에 콜백을 전달

• 이전 상태 값을 받아와서 새로운 상태 값을 계산할 수 있다

이점

• 이전 상태 값에 의존적인 업데이트
  • 콜백 함수를 사용하여 이전 상태 값을 받아와서 새로운 상태 값을 계산할 수 있다
  • 이를 활용하면 이전 상태 값에 의존적인 업데이트를 수행할 수 있다
• 비동기적 업데이트
  • 콜백 함수를 사용하여 상태 업데이트를 비동기적으로 처리할 수 있다
  • 상태 업데이트가 비동기적으로 처리되면 연속적인 상태 업데이트에 대한 성능 향상과 함께, 최신 상태를 보장하는 데 도움이 될 수 있다.

단점 및 주의할 점

• 의존성 문제
  • 콜백 함수를 인자로 전달하여 상태를 업데이트하면, 이전 상태 값을 직접 참조할 수 있기 때문에 이전 상태 값에 의존하는 로직이 복잡해 질 수 있다
    • 이로 인해 코드의 가독성과 유지보수성이 낮아질 수 있다
• 렌더링 횟수 증가
  • 콜백 함수를 인자로 전달하여 상태를 업데이트하면, 해당 상태를 업데이트하는 콜백 함수가 실행될 때마다 컴포넌트가 리렌더링 된다
  • 즉, 상태 업데이트에 따른 렌더링 횟수가 증가할 수 있으므로, 불필요한 렌더링을 방지 하기 위해 최적화가 필요하다
• 포착된 상태의 가장 최신 값 보장
  • 콜백 함수를 사용하여 상태를 업데이트하는 경우, 클로저 문제가 발생할 수 있다
  • 여러 상태 업데이트가 동시에 발생하는 경우, 클로저에 의해 마지막으로 포착된 상태 값이 보장되지 않을 수 있다
    • 이러한 상황을 피하기 위해 함수형 업데이트를 활용하거나 상태를 객체로 관리하는 방법을 사용할 수 있다

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

	const handleIncrement = () => setCount(count + 1);
	const handleAsyncIncrement = () => {
			setTimeout(() => {
					setCount(prev => prev + 1);
					// 최신의 count를 참조하기 때문에 
					// handleIncrement의 결과값 + 1만큼 증가
			
					setCount(count + 1);
					// 핸들러가 실행될 때의 count를 기준으로 
					// handleIncrement가 몇 번 실행되던
					// 핸들러가 시작될 때의 count 값을 1 증가 시킴
			}, 1000);
			set
	}
}

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];