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.