FesaComponents
DataTableAyuda

Modelo de performance

Qué garantiza la librería y qué debe poner la app de su parte.

Lo que garantiza la librería

  • 1 fila = 1 re-render: los estados de selección/expansión viajan como objetos y cada fila se compara con un comparador a medida. Marcar 1 de 100 re-renderiza 1.
  • Teclear no re-renderiza: el input de búsqueda es no-controlado con debounce de 700ms; el primer render afectado es el que trae datos nuevos.
  • Sin parpadeos: en un refetch se mantienen los datos anteriores con el indicador «Actualizando»; los skeletons solo existen en la carga inicial sin initialData.
  • Anti-race: contador de fetch (respuestas viejas descartadas), safety timeout de 15s, corrección automática de página vacía.
  • Bundle: exceljs solo se descarga al exportar XLSX; los iconos van tree-shaken.

Lo que debe poner la app

  • columns en useMemo y handlers estables (patrón actionsRef): si la identidad de columns cambia en cada render, todas las filas se re-renderizan.
  • Cells con estado o contenido complejo en memo() con displayName.
  • Props primitivas hacia las celdas (pasar userId, no user).
  • La page action con Promise.all para findMany + count, y select con solo los campos de la fila.

El motor interno usa el patrón latest-ref con "use no memo". Como las apps no compilan node_modules con React Compiler, la directiva es inerte: documenta el contrato del motor, no cuesta nada.

En esta pagina