Traté de encontrar el mismo caso, pero todos están en una situación diferente.

Creé 2 useEffects en mi componente, uno para inicializar el componente (1 ejecución) y otro para obtener datos cuando cambia algún estado (filtro). (muchas ejecuciones)

 const [filter1, setFilter1] = useState({}); const [filter2, setFilter2] = useState({}); //initialize filters, only once useEffect(() => { //here i fetch all the data to fill the filter components. setFilter1(data1); setFilter2(data2); }, []); //everytime my filters change. useEffect(() => { //here i fetch data using the filter as parameters. }, [filter1,filter2]);

El código anterior es mi último enfoque y funciona bien. Cada vez que cambio los filtros, useEffect obtiene los datos y carga la tabla con esos datos.

Muestro a continuación el antiguo enfoque que tomé y el que no me gustó.

 const loadData = useCallback((filter1,filter2) => { //here i fetch data using the filter as parameters. }, [filter1,filter2]); useEffect(() => { //here i fetch all the data to fill the filter components. setFilter1(data1); setFilter2(data2); loadData(filter1, filter2); },[]);

y usé la función loadData en cada controlador de cambio de filtro como:

 const onFilter1Change = (val) => { setFilter1(val); loadData(val, filter2) };

El antiguo enfoque anterior me trajo algunos problemas con respecto a cómo usar los ganchos correctamente y es por eso que me encuentro preguntándoles a los expertos de React cómo mejorar mi codificación de la mejor manera.

El nuevo enfoque funciona bien para mí, aunque me pregunto si es correcto usar 2 useEffect en este caso, o si hay una mejor manera de hacerlo.

Salud