Seonglae ChoReact.memo is a higher-order component that prevents unnecessary re-renders of child components when their parent component changes. It preserves the child component's previous render if its props haven't changed.
React.memo was designed to incorporate functionality similar to PureComponent and shouldComponentUpdate. It accepts two arguments:
- The component to be memoized
- An optional comparison function to determine if the component should re-render
By default, React.memo performs a shallow comparison of props. The comparison function works opposite to shouldComponentUpdate:
- true: Props are equal, skip re-rendering
- false: Props differ, proceed with re-rendering
[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링
레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow 란 글이 잘 설명해준다. 3.1.1 CSS 속성 개요 분류: CSS 이야기가 나온김에 리플로우에 영향을 미치는 유명한 CSS 요소들을 뽑아보자면 [ CSS Triggers, 20 Tips for Optimizing CSS Performance] 이 있다. 그리고 재계산을 유발하기로 유명한 속성은 다음이 있으며 불필요하게 값을 수정하지 않는게 좋다.
https://black7375.tistory.com/79
![[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFM5Z5%2FbtqWWsOdWiT%2FKHI0LMAvyNP2FC6IaoYy6k%2Fimg.png)