React.useCallback

• 리렌더링 간에 함수 정의를 캐싱해주는 React Hook이다.

const cachedFn = 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]);

debounce

• 입력값이 변경될 때 일정 시간 동안 대기하다가, 그 시간 동안 다른 변경이 없으면 입력값에 대한 처리를 수행한다.
• 이벤트가 연속적으로 발생하던 것 중, 마지막 이벤트만 실행시켜 불필요한 리소스 소비를 줄이고, 성능을 향상시킬 수 있다.
• 예시와 같은 mui 라이브러리 말고도 lodash 라이브러리에서도 사용 가능하다.

예시

import debounce from '@mui/material'
const changeInputText = useCallback(
    debounce((event: React.ChangeEvent<HTMLInputElement>) => {
      const value = event.target.value === ' ' ? '' : event.target.value
      setInputText(value)
    }, 1000),
    []
  )