I don't get it, where am I doing wrong(using api in reactjs)

I don’t get it, I thought both code are basically the same, but when page refresh, why am I getting errors with code 1 and fine with code 2?

Giphy API, to get array of objects data without destructuring:

.then((response) => {
	setGifs(response.data.data);
})


Code 1 (Comments in code)

import React, { useState, useEffect } from 'react';
import '../App.css';
import axios from 'axios';


function App() {
	const [gifs, setGifs] = useState({});

	useEffect(() => {
		axios
			.get(
				'http://api.giphy.com/v1/gifs/search?q=cats&limit=10&api_key=123456789'
			)
			.then(({ data }) => {
                /* I only  destructure to second layer, which gives me => {data: Array(10), pagination: {…}, meta: {…}} */
				setGifs(data);
				console.log(data)
			})
			.catch((error) => {
				console.log(error);
			});
	}, []);


	return (
		<>
			<div className='main-content'>
                /* So in here I need to add extra ".data" to get the array of objects data */
				{console.log(gifs.data.length)}
			</div>
		</>
	);
}

export default App;


Code 2(Comments in code)

import React, { useState, useEffect } from 'react';
import '../App.css';
import axios from 'axios';


function App() {
	const [gifs, setGifs] = useState({});

	useEffect(() => {
		axios
			.get(
				'http://api.giphy.com/v1/gifs/search?q=cats&limit=10&api_key=123456789'
			)
			.then(({ data }) => {
                /* I only  destructure to second layer but I add extra ".data", which gives me => (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] */
				setGifs(data.data);
				console.log(data.data)
			})
			.catch((error) => {
				console.log(error);
			});
	}, []);


	return (
		<>
			<div className='main-content'>
                /* So in here I don't need to add extra ".data" */
				{console.log(gifs.length)}
			</div>
		</>
	);
}

export default App;

For code 1, (without “.length”) console shows undefined first then array of objects.
For code 2, (without “.length”) console shows empty object first then array of objects.
(Why is code 1 getting undefined first and code 2 gets empty object first?)

I don’t get it, where I am doing wrong?

Hi @method8516363065
if an array of objects is what you get from the API and set as state, you should initialize gifs as an empty array rather than an empty object.

Hi, the reason I initialize gifs as an empty object and not array is because I also want to use pagination data which it also included in the response ( {data: Array(10), pagination: {…}, meta: {…}} ).

But you just save the data array to gifs, as I see it. If you initialize the gifs as an empty object but what it gets is an array, it leads to the issue you describe.
You could have separate states for the pagination and the data:

const [pagination, setPagination] = useState({});
const [gifs, setGifs] = useState([]);

Whether you put all data you receive to gifs (setGifs(data)) or just the data(setGifs(data.data)): It seems like either will be an array.