Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

341
Views
Evite agregar dependencias innecesarias a useEffect

Estoy usando la tabla de reacción en mi aplicación con paginación del lado del servidor con búsqueda. Cada vez que cambia la paginación, uso onPaginationChange prop para llamar a la API. Pero también tengo un texto de entrada de búsqueda. Para esto, uso useEffect para escuchar los cambios de texto de búsqueda y llamar a la API.

 <Pagination onPaginationChange={(pageSize, pageNo) => { setNoOfRecords(pageSize); dispatchGet( dispatch, currentOrg.id, pageSize, pageNo, searchText, ); }} //this is ok />

También tengo un estado de useEffect searchText el cambio de texto de searchText y una llamada a la API:

 const [searchText, setSearchText] = useState("");
 useEffect(() => { if (currentOrg) { dispatchGetSubOrgs( dispatch, currentOrg.id, noOfRecords, currentPage, // I get these from redux store and get updated when API calls searchText, ); } }, [searchText]);

Aquí Eslint se queja de que necesito agregar currentPage a la matriz de dependencia. Pero si lo agrego y se llama a onPaginationChange debido a algunos cambios de paginación, currentPage se actualizará y se llamará a useEffect y llamará a la API dos veces.

Si ignoro este error de Eslint, ¿será un problema? Además, no sé por qué React quiere que agregue todo en la matriz de dependencia. ¿Qué pasa si no quiero que useEffect se ejecute cuando cambia algo en la matriz de dependencia? Me veo obligado a agregarlo porque podría tener valores obsoletos. ¿Cómo trato con esto?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Para useEffect , aquí está la mentalidad: "Todo lo que está definido fuera de mí, y que usa mi función de devolución de llamada, debe estar en la matriz de mis dependencias, para saber cuándo solicito que la devolución de llamada se ejecute nuevamente".

Así es como Eslint ve las cosas. Pero usted, como desarrollador, puede tomar sus propias decisiones sobre lo que debería estar en esa matriz. Puede desactivar esas advertencias con la ayuda de eslint-disable-next-line react-hooks/exhaustive-deps , así:

 useEffect(() => { if (currentOrg) { dispatchGetSubOrgs( dispatch, currentOrg.id, noOfRecords, currentPage, searchText, ); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchText]

Pero debe saber que hacerlo de manera sistemática podría crear errores en el futuro, ya que perderá esas advertencias. Sin embargo, useEffect funcionará bien, como decidiste que debería.

about 4 years ago · Juan Pablo Isaza Report

0

puede agregar los siguientes comentarios al final del código

 if (currentOrg) { dispatchGetSubOrgs( dispatch, currentOrg.id, noOfRecords, currentPage, searchText, ); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchText]
about 4 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 Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!