Tengo un pequeño problema al tratar de obtener y filtrar algunos datos cuando se monta un componente. Básicamente, lo que estoy tratando de hacer es obtener algunos datos aleatorios y luego filtrarlos con una condición. pero el filtrado de los datos no funciona, lo más probable es que haya una parte que no entendí bien al usar useEffect. Hice una muestra de código donde simplifiqué y reproduje el problema en https://codesandbox.io/s/green-night-rhg4lj?file=/src/App.js

Cuando presiono el botón, espero que los datos filtrados se registren en la consola, pero solo me da una matriz vacía. Intenté agregar "filteredData" o "fechedData" como una dependencia de useEffect, y sí, me ayuda a obtener los datos filtrados justo al principio, pero entran en un bucle sin fin debido al comportamiento de las dependencias useEffect con obj y matrices. ¿Alguien conoce una forma de obtener los datos de API/Base de datos y filtrarlos directamente en el montaje sin entrar en un bucle de recuperación?

Aquí también está el código escrito al lado de codesandbox:

 import axios from "axios"; import { useState, useEffect, useCallback } from "react"; export default function App() { const [fetchedData, setFetchedData] = useState([]); const [filteredData, setFilteredData] = useState([]); const getData = useCallback(async () => { const { data } = await axios.get( "https://jsonplaceholder.typicode.com/posts" ); setFetchedData(data); }, []); useEffect(() => { getData(); (async () => { await setFilteredData(fetchedData.filter((p) => p.title.length > 20)); })(); }, []); const clickHandler = () => { console.log(filteredData); }; return ( <div className="App"> <button onClick={clickHandler}>Click</button> </div> ); }