【Day 28】Hook 08：useCallback

useCallback

如果父元件所传递的 props 包含 Object，
则在元件因状态改变而 re-render 时，
Object 的记忆体位址也会随之重新分配。

useCallback 则能够在特定条件下
保留原本的 Object，
防止其记忆体位址参考
因 re-render 而被改变。

因此搭配 React.memo 使用时，
能够避免因传入元件的 callback
记忆体位址不同而强迫重新渲染的问题。

用法

const memorizedValue = useCallback(callback, array)

callback：一个 function， dependencies array 变动时才会被更新。
array：内容发生改变时才重新执行，所有在 callback 中引用的值都应该出现在这个 array 中，否则 useCallback 可能会失效

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback 会帮我们记住
callback 函式的记忆体位置，
在 React 元件重新渲染时，
若 dependencies array 中的值没有被修改，
就沿用上次的 reference。

使用范例

const List = ({getItems}) => {
  const [item, setItems] = useState([])
  useEffect(() => {
    setItems(getItems())
  }, [getItems])
  
  return item.map(item => <span key={item}>{item} , </span>)
}

const App = () => {
  const [number, setNumber] = useState(0);

  // very slow function
  const getItems = useCallback(() => {
    return [number, number + 1, number + 2]
  }, [number])
  
  const changeHandler = e => {
    setNumber(e.target.value)
  }
 
  return (
    <>
        <input type='number' value={number} onChange={changeHandler} />
        <List getItems={getItems} ></List> 
    </>
  )
};