Ejemplo de código: https://codesandbox.io/s/nice-cherry-z8hn9
Estoy usando react-table para crear un componente de tabla que recibe un objeto de configuración con configuración de opciones + columnas.
He creado 2 componentes, TableInstance y Table
El componente TableInstance maneja los datos y el estado de la tabla y la tabla solo maneja la representación de la interfaz de usuario.
También he creado 2 ganchos personalizados que manejan el estado y los datos en el componente TableInstance .
Hook 1, llamado useTableState , tiene un reductor simple que establece el pageSize de página y la page actual
El gancho 2, llamado useTableData , realiza una consulta y devuelve los datos, además de devolver la configuración de columnas que necesita react-table .
Siguiendo los ejemplos en los documentos react-table , creé 2 ganchos useEffect ( TableInstance.js líneas 33 y 38) que reaccionan cuando el estado de la tabla cambia en la paginación, cuando eso sucede, envío una acción en el reductor useTableState que actualiza el estado para configurar pageSize y page .
El problema ocurre cuando configuro manualPagination: false . Obtengo Maximum update depth exceeded porque TableInstance se vuelve a renderizar constantemente. No sé qué causa los re-renders. Si en lugar de usar useReducer uso useState , entonces el error no ocurre. Puede verificarlo usted mismo, en el useTableState dejé comentado el enfoque useState , si solo comenta los despachadores y descomenta setState, entonces desaparecerá el error.
Nuevamente, el problema es SOLO cuando uso manualPagination: false , si luego uso manualPagination: true controlando la paginación yo mismo, entonces no hay problema. También puede probarlo usted mismo cambiando la configuración en el archivo tableConfig
Realmente agradecería algo de ayuda ya que estoy un poco perdido aquí, ¿qué es lo que no veo que causa este problema?
TLDR : useReducer en combinación con la paginación de la tabla de reacción provoca un bucle infinito de re-renderizaciones que se soluciona si cambio el enfoque a useState en su lugar
Ejemplo de código: https://codesandbox.io/s/nice-cherry-z8hn9
Te falta la variable de column como dependencia en el useMemo de useTableData . Agregar esto solucionará el problema.
const tableColumns = useMemo(() => { return buildTableColumns(columns); }, [columns]);Aquí hay una bifurcación de su sandbox que muestra el efecto del cambio https://codesandbox.io/s/fervent-jepsen-657lm