The data is obtained in the getRecommend / getPopular function, then the results are written to the appropriate states and I propagate them to another component, the question is, when displaying these 2 states, I first have a bunch of empty arrays, is this normal or not, if not, how fix?

There are about 10-15 lines in the console [], then the data comes

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])