useCallback – React

함수 메모이제이션

useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다.

useCallback(fn, dependencies)

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

• fn: 캐시하려는 함수 값입니다. 모든 인수를 취하고 모든 값을 반환할 수 있습니다. React는 초기 렌더링 중에 함수를 다시 반환합니다(호출하지 않음!). dependencies다음 렌더링에서 React는 마지막 렌더링 이후 변경되지 않은 경우 동일한 기능을 다시 제공합니다 . 그렇지 않으면 현재 렌더링 중에 전달한 함수를 제공하고 나중에 다시 사용할 수 있도록 저장합니다. React는 함수를 호출하지 않습니다. 함수가 사용자에게 반환되므로 호출 시기와 호출 여부를 결정할 수 있습니다.

• dependencies: 코드 내부에서 참조되는 모든 반응 값의 목록입니다 fn. 반응형 값에는 props, state 및 구성 요소 본체 내부에 직접 선언된 모든 변수와 함수가 포함됩니다. Linter가 React용으로 구성된 경우 모든 반응 값이 종속성으로 올바르게 지정되었는지 확인합니다. 종속성 목록은 항목 수가 일정해야 하며 처럼 인라인으로 작성되어야 합니다 [dep1, dep2, dep3]. React는 비교 알고리즘을 사용하여 각 종속성을 이전 값과 비교합니다 Object.is.