[React] Hooks - useMemo

[DrMaemi]

const myComponent = (props: myType): JSX.Element => {

    // internal functions

    return (
        <>example</>
    )
}

• 리액트 환경에서는 위와 같은 함수형 컴포넌트가 페이지 렌더링이 일어날 때마다 호출됨.
• 매번 호출하지 않기 위해 memoization 적용

const myComponent = (props: myType): JSX.Element => {
    const compute = (x, y) => x+y
    const z = useMemo(() => compute(x, y), [x, y])
    return (
        <>z</>
    )
}

• useMemo( factoryFn, dependencies ) Hook은 첫 번째 인자는 팩토리 함수, 두 번째 인자는 의존 배열
  • 배열 안에 있는 변수들의 값이 변하지 않으면 팩토리 함수를 통한 memoized value를 return

A. 참조

• React Hooks: useMemo 사용법
• API Reference - Hooks - useMemo