Tengo un componente de tabla con tableRows almacenado en useState.
También tengo un componente de búsqueda fuera del componente de la tabla.
Cuando los datos dentro del buscador cambian, tableRows se actualiza dentro de useEffect.
Y funciona bien, pero provoca dos reprocesamientos. Y entiendo por qué. Primero se vuelve a renderizar debido a useSelector, y el segundo porque useEffect tiene un valor de useSelector como dependencia.
Pero cómo evitar una repetición. Quiero que se reproduzca cuando cambie tableRows, pero no cuando cambie el buscador.
const CatalogTable: React.FC<CatalogTableProps> = ({rows}) => { const [tableRows, setTableRows] = React.useState(rows) const searcher = useSelector(getTableSearcher, shallowEqual) const getData = async () => { const {data} = await CatalogService.getAllCatalogProducts({page: 1, searcher: searcher}) setTableRows(data.products) } React.useEffect(() => { if(searcher) getData() }, [searcher]) return ( <> <div className={styles.defaultTable}> <Table headers={headers} label="Products catalog" rows={tableRows} total={total} pagination addButton editButtons searcher getPage={(page: number) => nextPage(page)} type='catalog' /> </div> </> ) } export default CatalogTableUna de las posibles soluciones es la memorización:
const CatalogTable: React.FC<CatalogTableProps> = ({rows}) => { const [tableRows, setTableRows] = React.useState(rows) const searcher = useSelector(getTableSearcher, shallowEqual) const getData = async () => { const {data} = await CatalogService.getAllCatalogProducts({page: 1, searcher: searcher}) setTableRows(data.products) } React.useEffect(() => { if(searcher) getData() }, [searcher]) const result = useMemo( () => <> <div className={styles.defaultTable}> <Table headers={headers} label="Products catalog" rows={tableRows} total={total} pagination addButton editButtons searcher getPage={(page: number) => nextPage(page)} type='catalog' /> </div> </>, [tableRows] ); return result; } export default CatalogTableotra solución es poner tableRows y la consulta de búsqueda dentro de la tienda redux y actualizarlos simultáneamente a través de un middleware asíncrono.
Se vuelve a renderizar porque su estado está cambiando, que es el resultado esperado. Esto se debe a que tableRows se establece dentro de useEffect (hay un setTableRows dentro del efecto, que depende del buscador).
No estoy seguro de cómo se usa el componente, ya que está pasando algunas filas iniciales en los accesorios y restableciendo las filas (setTableRows) dentro del componente, pero por su comentario parece que realmente no le importan los cambios en el buscador. Una solución para lograr lo que desea sería simplemente pasar las filas como accesorios y eliminar el estado del componente, de esa manera su componente solo se preocuparía por las filas y no por el buscador.
De todos modos, optimizar los renderizados no es la mejor manera de hacerlo, a menos que su renderizado sea lento. Además, es más seguro definir llamadas asíncronas dentro de useEffect, de esta manera es más fácil asegurarse de que todas las dependencias requeridas estén en la matriz de dependencias.