React Hooks Too many re-renders in pagination with redux

Question

I'm trying to filter my data to show with my reducers and works in the first render. However, when I try to change the page with the pagination get this error:

× Too many re-renders. React limits the number of renders to prevent an infinite loop dispatch(GetFilteredData());

And when I check the console, I get the infinite loop of console.log(data2) , but I don't know why this is happening.

Here is working my dispatch in PaisBody.js

import React, { useState, useEffect } from 'react';
import {useSelector,useDispatch} from 'react-redux';
import TablePagination from 'Layout/Table/TablePagination';
import {InsertPageCount,InsertData,GetFilteredData} from 'Redux/Actions/Pagination';
import GetApi from 'Url/index';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import allReducers from 'Redux/Reducers/Pagination';
import {TableFilter} from 'Layout/Table/TableFilter';



const PaisBody = (props) => {

  const dispatch = useDispatch();
  dispatch(InsertData(props.data));
  dispatch(InsertPageCount(props.data.length));

  dispatch(GetFilteredData());

  const CurrentPage = useSelector(state => state.CurrentPage.page);
  const data2 = useSelector(state => state.CurrentPage.filteredData);

  console.log(data2);



  return (
    <div>

     <p> Filter Data </p> 
    <p>TABLA CON LOS DATOS </p>

    <TablePagination/>

    </div>
  );
};




export default PaisBody;

This is my reducer:

   import {TableFilter} from 'Layout/Table/TableFilter';

const initialState = {
    page:1,
    pageCount: 0,
    forPage: 10,
    data: '',
    filterAux: '', 
    filteredData: '',
}

const CurrentPage = (state = initialState,action) =>{
    switch(action.type){
        case 'NEXT':
            return {
                ...state,
                page:state.page + 1
            };
        case 'PREV':
            return {
                ...state,
                page:state.page -1
            };
        case 'insertPage':
            return {
                ...state,
                page:action.value
            };
        case 'InsertPageCount':
            return {
                ...state,
                pageCount: Math.ceil(action.value / state.forPage)
            };
        case 'InsertData':  //
            return {
                ...state,
                data: action.value
            };
        case 'GetFilteredData':
            return {
                ...state,
                filteredData: TableFilter(state.data,state.forPage,state.page,state.filterAux)
            };           
        default:
            return state;   
    }
} 

export default CurrentPage;

Thank you for any help or advice!

I dont know if the code of pagination can help because i think the problem is with:

dispatch(GetFilteredData());

Answer 1

On every render, PaisBody will be executed, it may cause an infinite loop because on each render you dispatch an action that may lead to re-render.

In such cases, you should use useEffect (with dep-array) or useCallback (if you going to share props):

const PaisBody = props => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(InsertData(props.data));
  }, [props.data]);

  useEffect(() => {
    dispatch(InsertPageCount(props.data.length));
  }, [props.data.length]);

  // I guess you want it executed on mount.
  useEffect(() => {
    dispatch(GetFilteredData());
  }, []);

  ...

  return ...
};

Note that on each useDispatch call you get a new instance of dispatch , which is a common "performance" issue and should be memoized with useCallback