-
컴포넌트 내에 복잡한 계산을 하는 함수가 있을 때, useMemo를 사용하여 컴포넌트가 리렌더링되어도 종속변수, 의존성배열이 변하지 않는 한, 호출되지 않게 한다.
-
부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때, React.memo를 사용하여, props가 바뀌지 않았다면, 자식컴포넌트의 리렌더링이 일어나지 않게 한다. props가 추가, 변경된 부분이 있다면, 해당 부분만 렌더링이 일어나게 한다. React.memo는 현재와 다음 props를 비교하여 이전 props와 같다면 컴포넌트를 리렌더링 하지 않는다.
-
props가 함수일 경우에는 useCallback을 사용해서 리렌더링을 줄인다. useMemo가 리턴되는 값을 memoize 하는데 반해, useMemo와 비슷한 useCallback은 함수 선언을 memoize 하는데 사용된다. 함수는 객체이고 해당 함수를 포함하는 부모 컴포넌트가 리렌더링시, 자식컴포넌트를 포함하여 리렌더링 된다. 자식컴포넌트는 리렌더링을 막기위해 memo를 사용하여 자식컴포넌트를 감싼다. 하지만 이게 의도대로 기능을 수행하지 못한다. 함수는 객체이고 리렌더링 될 때마다, 새로함수를 생성하고 새로 생성된 함수는 새로운 참조값을 가진다. 자식컴포넌트 입장에서 props가 변한것으로 인지한다. 이를 막기 위해, useCallback을 사용하여 함수 재생성을 막고 이전 참조값을 그대로 사용하게 한다.
-
Input에 onChange 최적화: lodash 라이브러리, setTimeout메서드 등으로 타이핑할 때마다 렌더링 되는 빈도를 줄이기
