change useUpdate hook to use reducer instead of state + callback
useReducer가 state보다 가볍다는 의견이 있어요.
그리고 이러한 이유로 no need to use useCallback and have no inline function 라고 설명하고있는데,
이를 풀어보자면 다음과 같을 것 같아요.
"no inline function"이라는 표현은, 함수가 컴포넌트의 렌더링 시점에 직접 정의되지 않는다는 것을 의미해요. 보통 useCallback을 사용하는 이유는, 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되는 것을 방지하기 위해서인데, 이는 특히 함수가 props로 전달될 때 문제가 될 수 있어요. 새로운 함수가 생성되면 자식 컴포넌트가 불필요하게 리렌더링될 수 있거든요.
하지만 useReducer를 사용하면, 상태 관리 로직이 reducer 함수 안에 캡슐화되어 있어서, 상태를 업데이트하는 로직이 컴포넌트 바깥에서 미리 정의된 reducer 함수에 의해 처리됩니다. 그래서 컴포넌트 내에서 매번 새로운 함수가 정의되거나, useCallback을 사용해 그 함수를 메모이제이션할 필요가 없다는 거예요. 결국, 이 방식으로 컴포넌트의 렌더링 성능이 향상될 수 있다고 보는 거죠.
요약하자면, 여기서 "no inline function"은 "컴포넌트 렌더링 중에 새롭게 함수가 생성되지 않음"을 의미해요. useReducer를 사용하면 그런 문제를 피할 수 있다는 뜻이죠.
결국,
react-use에 위 의견이 반영되었습니다.
또한 Toss의 slash 라이브러리에서도 이러한 의견을 반영한 코드 조각이 존재했어요.
@toss/slash - useForceUpdate
위 Document에서도 useReducer가 useState보다 퍼포먼스가 좋은 시점을 설명하며
이를 활용한 훅을 제공해요.
🙇🙇
