React.useCallback() is still re-rendering child component

Viewed 807

1) I am passing a handler method onPaginationChange to child component(B) as prop from a parent component(A)

2) I use useState() hooks so every time when I call setFieldName() the parent component re-renders and so the child component even when the handler is not invoked.

3) I am trying to use useCallback hook to avoid re-rendering child component because of parent component's state change. But, still I see the child component is re-rendering plenty of times based on number of state changes on the parent component.

here's my handler function passed as an arg to useCallback. Handler function receives 2 props currentPageNo, pageSize and I am using currentPage as a dependency.

const onPaginationChange = useCallback((currentPageNo, pageSize) => {
    const startRow = (currentPageNo - 1) * pageSize;
    const newData = apiResponse.slice(startRow, startRow + pageSize);

    setCurrentPage(currentPageNo);
    setGridData(newData);
}, [currentPage]);

Let me know if you find the root-cause of the issue.

0 Answers
Related