CODEWITHSUNDEEP
reactjsusecallback
meez
meez

Reputation: 4769

When to use React useCallback hook

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;

Upvotes: 1

Views: 1859

Answers (1)

kosiakMD
kosiakMD

Reputation: 1062

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

Upvotes: 1

Related Questions