메모이제이션 시 초기 렌더링 vs 리렌더링 속도 실험

메모이제이션 자체가 연산이 들어가기 때문에 불필요한 메모이제이션은 오히려 프로젝트 성능을 악화시킨다는 것은 모두 알고 있을 것이다.

 

그렇다면 대체 언제, 어느 시점에, 몇 번의 리렌더링이 일어날 때, 시간 복잡도가 얼마일 때 메모이제이션을 써야 되는 걸까하는 궁금증이 있었는데,

그 기준을 실험한 흥미로운 글이 있어서 가져왔다.

 

https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/should-you-really-use-usememo.md?utm_source=substack&utm_medium=email

 

 

위 글은 복잡한 시간복잡도를 가진 컴포넌트를 메모이제이션 적용한 것과 적용하지 않은 것 각각 10,000번 렌더링, 리렌더링시켜 해당 컴포넌트의 시간복잡도가 몇일 때 useMemo를 적용하는 것이 효율적인지를 실험한 글이다.

 

아래는 메모이제이션을 했을 때를 기준으로 원문을 정리해 비교한 글이다.

*시간복잡도(n)

 

n=1

메모이제이션하지 않는 것이 항상 빠름

 

n=100

초기 렌더링 - 매우 느림

리렌더링 - 비슷

 

n=1000

초기 렌더링 - 183% 느림

리렌더링  - 약 37% 더 빠름

 

n=5000

초기 렌더링 - 545% 느림

리렌더링 - 437%에서 609%까지 향상

 

결론

메모이제이션이 극적인 효과를 나타내는 시간복잡도의 임계값은 5000.

리렌더링에서만 유의미한 결과를 얻는 것이 목적이라면 n>100일 때 사용.

임계값은 애플리케이션마다 다를 수 있음

 

글에서는 메모이제이션을 하위 컴포넌트에서 리렌더링을 피하기 위해 사용하는 것이 아니라

처리량이 많을 때 사용해야 한다고 권장하고 있다.