React Hooks (7) useCallback

發表於 更新於 分類於
介紹 useCallback 使用方式

基礎介紹

使用 useCallback 可以指定觀察的資料有更動時，才重新渲染函式。

1
2
3
4
5
6
7
8
9
10
11
12
const { useState, useEffect, useMemo, memo, useCallback } = React;
const [items, setItems] = useState([]);
const handleCheck = useCallback(
  (e) => {
    if (e.target.checked) {
      setItems([...items, e.target.value]);
    } else {
      setItems(items.filter((item) => item !== e.target.value));
    }
  },
  [items]
);

上面用 useCallback 指定在 items 資料有更新時，才重新渲染函式。

避免元件重新渲染

當我們將函式用 useCallback 處理後再傳入元件，可避免外層函式因其他資料更新而刷新函式，進一步導致元件也跟著更新。

1
<DataTable filterProducts={filterProducts} handleCheck={handleCheck} />

範例

codepen