(React) useCallback

function factory(a, b) {     return a + b; } const sumFunc1 = factory(); const sumFunc2 = factory(); console.log(sumFunc1(1, 2)); // => 3 console.log(sumFunc2(1, 2)); // => 3 console.log(sumFunc1 === sumFunc2); // => false console.log(sumFunc1 === sumFunc1); // => true

같은 factory함수를 가르킨다고 해도 인스턴스 오브젝트는 서로 다르다. 

또한 렌더링이 자주 반복되는 경우에도 이전 인스턴스와는 다른 sumFunc1과 sumFunc2 인스턴스가 생성된다.

 

그럼 언제 useCallback 필요할까?

일단 useCallback 으로 함수를 지정을 하면 항상 같은 인스턴스를 리턴하게 된다. 즉 같은 인스트를 필요료 할시 사용한다.

1. React.memo 를 사용시 prop 으로 함수 오브젝트를 지정할 때

2.  useEffect(... , [callback])  처럼 파라미터의 변경에 따라 코드가 실행 될 때

 

선언 형태
useCallback(callbackFun, deps)

import { useCallback } from 'react';  function MyComponent() {      // handleClick is the same function object     const handleClick = useCallback(() => {               console.log('Clicked!');     }, [ ]);     // ... }

 

handleClick 은  MyComponent 가 매번 렌더링 하더라도 같은 인스턴스 오브젝트를 반환한다.

 

좋은 사용예

MyBigList :  term 으로 검색한 대량의 결과를 리스트로 뿌려 줌

React.memo  로 감싸줌으로써 매번 렌더링되는 것을 막아준다.

import useSearch from './fetch-items';  function MyBigList({ term, onItemClick }) {         const items = useSearch(term);        const map = item => <div onClick={onItemClick}>{item}</div>;        return <div>{items.map(map)}</div>; } export default React.memo(MyBigList);

 

Parent : MyBigList 를 호출
MyParent  가 매번 렌더링 될때마다 onItemClick 은 새로 생성되지 않고 변하지 않는 상태로 존재한다.

import { useCallback } from 'react';  export function MyParent({ term }) {         const onItemClick = useCallback(event => {                                            console.log('You clicked ', event.currentTarget);                                       }, [term]);        return (            <MyBigList                  term={term}                  onItemClick={onItemClick}            />       ); }

 

나쁜 사용예

MyChild 의 역할이 가볍고 useCallback 를 사용하는 것으로 코드를 복잡하게 하므로 사용하지 않는게 

import { useCallback } from 'react';  function MyComponent() {            // Contrived use of `useCallback()`           const handleClick = useCallback(() => {                    console.log('You clicked');           }, [ ]);             return <MyChild onClick={handleClick} />; } function MyChild ({ onClick }) {         return <button onClick={onClick}>I am a child</button>; }