Necesito actualizar la llamada useEffect cuando actualizo el estado. ¿Alguien puede corregir el código? Actualmente está funcionando como esta captura de pantalla, los datos actualizados se procesan después de los datos de procesamiento previo. lo que se necesita es cuando hago clic en cualquier filtro cada vez que genera nuevos datos. Ver captura de pantalla

Aquí está mi código:

 const PAGE_NUMBER =1; export const SimpleInfiniteList = () => { const [img, setImg] = useState('') const [page, setPage] = useState(PAGE_NUMBER) const iddata = img.slice(-1) const [filter, setFilter] = useState('top') const [, forceUpdate] = useReducer(x => x + 1, 0); useEffect(() => { const filt = () => { if(filter > 0){ filt() } } }, []) useEffect( () => { forceUpdate() fetch(`https://www.reddit.com/r/ProgrammerHumor/${filter}.json?after=${ iddata.length > 0 ? iddata.map(id => `t3_${id.data.id}`): ''}&page=${page}&limit=2`) .then(response => response.json()) .then(data => setImg([...img, ...data.data.children], ) ) }, [filter,page]) console.log(img) const scrollToEnd = () => { setPage(page + 1) } window.onscroll = function () { const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight if (bottom, Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight ) { scrollToEnd() console.log('loading....') } } }