[React.js] - UseMemo & UseCallback

useMemo()

---

• React Component의 re-render 가 발생될 때 느린 함수가 게속 실행되는 것을 방지

• 새로운 계산이나 함수를 memoization 방식으로 caching

useCallback()

---

• useMemo 와 흡사 : 특정 데이터의 변화가 없을 시 재실행이 안됨

🤔 useMemo vs useCallback 차이

---

const getItems = useMemo(() => {
  return number + 1;
}, [number]);

const getItems = useCallback(() => {
  return number + 1;
}, [number]);

💡 return의 차이!

---

• 위에 예시를 보면 코드의 형태가 흡사한걸 볼 수 있지만 리턴 결과가 다르다

: Value

• useMemo = return의 결과물을 getItems 변수로 반환

  ( getItems = number :number )

: Function

• useCallback : Function = 함수 자체를 getItems 변수로 반환

  ( getItems = function(() => number + 1) )

💻 example :

---

• getTodoColurNums 함수는 TodoType[] 타입의 todo props를 확인

• todo.color 의 색상 정보를 가진 문자열을 확인 후 계산

• referential equality : 정보가 바뀐 부분에 대해 caching을 하여 컴포넌트가 re-render할 때 데이터의 변화가 없을 시 함수 호출이 안됨

• 컴포넌트의 렌더 속도는 빨라지지만 메모리에 새로운 변수 저장소를 생성하기 때문에 모든 데이터를 useMemo의 성능 향상을 위해서만 사용

• const todoColorNums = useMemo(getTodoColorNums, [todos]);

  • todoColorNums 는 todos의 값의 변화가 있을 때 마다 getTodoColorNums useCallback 함수를 생성하여 'useMemo` 값을 반환한다

import React, { FC, useMemo, useCallback } from "react";
import styled from "styled-components";
import palette from "../styles/palette";
import { TodoType } from "../types/todo";

...
// styled-components
...

interface IProps {
  todos: TodoType[];
}

const TodoList: FC<IProps> = ({ todos }) => {
  const getTodoColorNums = useCallback(() => {
    let red = 0;
    let orange = 0;
    let yellow = 0;
    let green = 0;
    let blue = 0;
    let navy = 0;

    todos.forEach((todo) => {
      switch (todo.color) {
        case "red":
          red += 1;
          break;
        case "orange":
          orange += 1;
          break;
        case "yellow":
          yellow += 1;
          break;
        case "green":
          green += 1;
          break;
        case "blue":
          blue += 1;
          break;
        case "navy":
          navy += 1;
          break;
        default:
          break;
      }
    });

    return {
      red,
      orange,
      yellow,
      green,
      blue,
      navy,
    };
  }, [todos]);

  const todoColorNums = useMemo(getTodoColorNums, [todos]);

  return (
    <Container>
      <TodoHeader>
        <TodoListLastNumber>
          남은 TODO <span>{todos.length}개</span>
        </TodoListLastNumber>
      </TodoHeader>
    </Container>
  );
};

export default TodoList;