Los datos se obtienen en la función getRecommend / getPopular, luego los resultados se escriben en los estados apropiados y los propago a otro componente, la pregunta es, al mostrar estos 2 estados, primero tengo un montón de matrices vacías, ¿es esto normal? o no, si no, ¿cómo arreglar?

Hay alrededor de 10-15 líneas en la consola [], luego vienen los datos

 const {userId} = useParams(); const {page} = useParams(); const [recommend, setRecommend] = useState([]); const [popular, setPopular] = useState([]); useEffect(() => { const fun = async () => { try { let result = await getRecommend(userId, 6) if (result) { setRecommend(result) } } catch (err) { console.log("err") } } fun() }, [userId])