• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

302
Views
Optimización de renderización useSelector y useEffect

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 CatalogTable

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Una 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 CatalogTable

otra 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.

almost 3 years ago · Juan Pablo Isaza Report

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error