何时使用 React useCallback 钩子

Question

In my below React component I am fetching more items using Apollo Client fetchMore function .

What is exactly the purpose of using React useCallback hook here? And is it good idea to use that in this case?

const Carousel = ({ data: blockData, metadata }: Props) => {

  const { data, fetchMore, networkStatus } = useQuery<
   GqlRes,
  >(GET_NODES, {
    variables: {
      offset
      limit
    },
    errorPolicy: 'all',
    notifyOnNetworkStatusChange: true,
    ssr: false,
  });


  const fetchNextPage = useCallback(() => {
    return fetchMore({
      variables: {
        offset: data?.getNodes.nodes.length,
      },
    });
  }, [data, fetchMore]);

  const items =
    data?.getNodes.nodes
      .map((node) => {
        return {
          id: node.id,
          title: node.title,
        };
      }) || [];

  return (
    <Carousel
      items={items}
        onEnd={() => {
         if (data?.getNodes.pager?.hasNextPage) {
           fetchNextPage();
         }
      }}
    />
  )
};

export default Carousel;

Answer 1

IMHO:

1. if your inner 'Carousel' component is cached (memoized by React.memo or extends PureComponent ) it's could to do not provide new properties on each parent (outer 'Carousel') re-render (just to mention - on each re-render you not memoized objects and function will be created again as new instances and will be passed further as new properties and cause new re-renders of children) it's to use useCallback
2. even more, I would like to use useMemo for your ' items ' data variable to avoid that logic re-handling. Yes for it's logically will be new on each update of ' data ' or other properties from a parent, BUT when someone will extend the logic of the component and it will be re-rendered, then data handling could be not changed and that logic will be redundant - you safe time of component logic handling