데이터가 많아지면 애플리케이션이 느려지는 것을 체감을 할 수도 있다고 합니다.
여러가지 방법으로 컴포넌트를 최적화해보겠습니다.

많은 데이터 렌더링하기

useState의 기본값으로 함수를 넣어주는 경우
함수를 userState(crateTodos()) 이런식으로 작성하면, 리렌더링할 때마다 호출되지만
userState(createTodo) 처럼 적어주게 된다면, 컴포넌트가 처음 실행될 때만 함수가 실행됩니다.

React Devtools

React Devtools를 이용해서 측정을 할 수 있습니다.
방법은 직접 써보는 걸로..

그래서 이걸 통해서 성능 최적화를 할 수 있고, 몇 % 빠르게 하였다. 그런 수치가 나올 수 있습니다.

느려지는 원인 분석

리렌더링이 발생하는 시점은 아래와 같습니다.

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

현재의 todolist의 여러 항목들은 항목1만 리렌더링되어야 하지만 2~2000개 까지 모두 리렌더링 되고 있어서 느렸습니다.
불필요한 리렌더링을 방지해줄 필요가 있습니다.

React.memo

shouldComponentUpdate 를 사용하고 싶지만 클래스형이 아니기 때문에 React.memo 라는 함수를 사용합니다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 하지 않게 설정합니다.

사용법은 정말 간단합니다. export를 해줄때 React.memo 로 묶어주면 됩니다.

export default React.memo(TodoListItem)

하지만 이 작업만 한다고 되는 것은 아닙니다.

todos 배열이 업데이트 되면, onRemove 와 onToggle 함수가 새롭게 변합니다.
onRemove와 onToggle 함수는 배열 상태를 업데이트하는 과정에서 최신 상태의 todos를 참조하기 때문에 todos 배열이 바뀔 때마다 함수가 새로 만들어집니다.

이 함수가 계속 만들어지는 상황을 방지해야합니다.
그 방법은 크게 두가지로 나뉩니다.

1. usestate 함수형 업데이트

기존의 setState 는 새로운 상태를 파라미터로 넣었습니다.
파라미터를 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣을 수도 있습니다.
이를 함수형 업데이트라고 합니다.

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

이렇게 사용하면 useCallback의 [] 안에 number을 넣지 않아도 됩니다.

const onToggle = useCallback((id)=>{
  setTodos(todos=>
    todos.map(todo=>
      todo.id ===id ? {...todo:checked:!todo.checked}:todo
    )
  )
},[])

const onRemove = useCallback((id)=>{
  setTodos(todos=>todos.filter(todo=>todo.id !==id))
},[])

<TodoList todos={todos} onRemove={onRemove} onToggle={onToggle}>

이렇게 함수를 정해주고 prop으로 내려주어 사용하게 되면, 필요하지 않은 부분이 리렌더링되지 않습니다.

2. useReducer 사용

이런 방법이 있다고만 알고 이부분은 넘어가겠습니다.

불변성의 중요성

상태를 업데이트할 때 불변성을 지키는 것은 필수임을 알고 있습니다.
React.memo를 사용했을 때 props가 바뀌는지 바뀌지 않는지를 알아내서 리렌더링 성능을 최적화해주는 작업을 합니다. 만일 불변성이 안지켜졌다면, 알수없겠죠?

react-virtualized

보이지 않는 부분에서도 렌더링이 일어나기 때문에, 비효율적입니다.
이부분을 크기만 차지하고, 렌더링 하지 않게끔 할 수 있는 라이브러리입니다.

immer

컴포넌트의 상태 업데이트가 깊어서 까다로울때 사용하면 좋습니다.
불변성을 해치지 않고 수정이 가능하다는 점이 장점입니다.
user.work.name.code = 4