컴포넌트 리렌더링 발생 요인

• 자신이 전달 받은 props 가 변경될 때
• 자신의 state가 바뀔 때
• 부모 컴포넌트가 리렌더링 될 때
• forceUpdate 함수가 실행 될 때

-> 불필요한 리렌더링은 막아야 한다 !

컴포넌트 최적화

React.memo

함수형 컴포넌트에서는 라이프 사이클 메서드를 사용할 수 없다. 그 대신 React.memo 를 사용하는데 컴포넌트의 props 가 바뀌지 않았다면 리렌더링을 하지 않도록 한다.

useState 의 함수형 업데이트

setNumber (number + 1)
대신 

const onIncrease =useCallback (() => setNumber (prevNumber => prevNumber +1)), [],);

useReducer 사용

상태를 업데이트 하는 로직을 모아서 컴포넌트 바깥에 둘 수 있다는 장점.

react-virtualized

리스트 컴포넌트에서 스크롤 되기 전에 보이지 않는 컴포넘트는 렌더링하지 않고, 크기만 차지 하게끔 할 수 있다.