React Hooks: useState initializes empty array that becomes object?

As a professional coder, have you ever wondered why your useState initialized empty array turns into an object when using React Hooks? In this blog post, we’ll dive into this issue and provide an explanation along with some tips to handle it. So let’s have a conversation about this intriguing problem!

Understanding the Problem

Consider the following code snippet, where we believe that the gameList is initialized as an empty array. The first console.log shows that gameList is indeed an empty array. However, when we use console.log inside the useEffect() hook, it displays gameList as an object. This is confusing since it appears that we haven’t done anything to transform the gameList.

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

const Searchbar = () => {
  const [searchString, setSearchString] = useState('');
  const [gameList, setGameList] = useState([]);

  console.log(gameList); // []

  useEffect(() => {
    console.log('gameList is ' + typeof gameList); // gameList is object
  });

  // ...
};

export default Searchbar;

Why does this happen?

First, let’s clarify something essential in JavaScript: arrays are considered objects. This is demonstrated by the following example:

console.log(typeof []); //=> "object"

So, when we use typeof on an empty array, it returns “object.” To verify if something is an array, we can use the Array.isArray() method or the Object.prototype.toString.call() method:

console.log(Array.isArray([])); //=> true
console.log(Object.prototype.toString.call([])); //=> "[object Array]"

Passing an Empty Array to a Child Component

Now let’s address the main concern: why does the gameList show up in the GameList component as an object with gameList as a property, and not as an empty array?

Solution: Using Props Correctly

Firstly, ensure that the GameList component receives the gameList prop correctly. Inside the GameList component, you can access the gameList array through props.gameList or by destructuring the props like this:

const GameList = ({ gameList }) => {
  // ...
};

By doing this, you should be able to access the gameList array correctly in the child component.

Summary

In conclusion, when using React Hooks and initializing an empty array with useState, it’s essential to understand that arrays in JavaScript are considered objects. Therefore, using typeof on an array will return “object.” When passing the array as a prop to a child component, make sure to access it correctly using props.gameList or destructuring the props in the child component.

Additional Tips

Here are some additional tips to help you better understand and work with arrays and objects in React:

• Array Manipulation: When working with arrays, remember to use proper array manipulation methods, such as map(), filter(), and reduce(). Avoid directly modifying the state, as this can lead to unexpected behavior.
• Object Destructuring: Destructuring assignment can make your code more readable and maintainable by allowing you to extract properties from objects or elements from arrays. This can be particularly helpful when dealing with complex nested data structures.
• State Updates: Remember that state updates in React are asynchronous. To ensure the latest state is used when updating, use a callback function within setState() or the functional update form of useState().
• React Developer Tools: The React Developer Tools browser extension can help you debug and inspect your React components and their state. It’s an invaluable tool when dealing with complex state management issues.

With these tips and a clear understanding of how arrays and objects work in React, you’ll be better equipped to handle any unexpected issues that may arise when working with state and props in your React applications.

Wrapping Up

We hope this blog post has provided some clarity on the issue of useState initialized empty arrays turning into objects in React Hooks. By keeping in mind the fact that arrays are considered objects in JavaScript, using proper methods to check for arrays, and correctly accessing props in child components, you’ll be better prepared to tackle this issue and create more robust React applications. Happy coding!