功能组件中的 useCallback

Question

我在一个功能组件中定义了一个 useCallback 函数，它在同一个功能组件中的 useEffect 中使用。 在这种情况下，功能是否优化？

import { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchMetadata } from '../features/metadata/metadataSlice';
import { getChangedItems } from '../app/evergreenAPI';

const useWatchChanges = () => {
  const dispatch = useDispatch();
  const { isLogged } = useSelector((state) => state.auth);
  const handleChangedItems = useCallback((changedItems) => {
    console.log('...doing something with', changedItems);
  }, []);

  const fetchChangedItems = async () => {
    if (!isLogged) return false;
    try {
      const changedItems = await getChangedItems();
      changedItems &&
        setTimeout(() => {
          handleChangedItems(changedItems);
        });
      fetchChangedItems();
    } catch (e) {
      console.log(e);
      fetchChangedItems();
    }
  };

  useEffect(() => {
    fetchChangedItems();
  }, [isLogged, fetchChangedItems]);
};

export default useWatchChanges;

Answer 1

您的 useCallback 依赖项数组中缺少依赖项。

 const handleChangedItems = useCallback((changedItems) => {
    console.log('...doing something with', changedItems);
  }, [changedItems]);

此外，在这里使用 useCallback 可能没有任何意义，因为 useCallback 也需要执行时间和资源。 但是由于执行时间/资源的原因，您的 handleChangedItems 没有做任何值得投入 useCallback 的事情。 请看一看：

https://kentcdodds.com/blog/usememo-and-usecallback