How to check if an Object is Empty in React

Check if an Object is Empty in React #

To check if an object is empty in React:

Use the Object.keys() method to get an array of the object's keys.
Access the length property on the array.
If the array of keys has a length of 0, then the object is empty.

App.js

Copied!
import {useEffect, useState} from 'react';

export default function App() {
  const [person, setPerson] = useState({});

  useEffect(() => {
    if (Object.keys(person).length === 0) {
      console.log('Object is empty');
    }

    if (Object.keys(person).length > 0) {
      console.log('Object is NOT empty');
    }
  }, [person]);

  return (
    <div>
      <h2>Object: {JSON.stringify(person)}</h2>

      <button onClick={() => setPerson({id: 1, name: 'Alice'})}>
        Set state
      </button>
    </div>
  );
}

react check if object is empty

We used the Object.keys method to get an array of all of the object's keys.

App.js

Copied!
const obj = {
  id: 1,
  name: 'Alice',
};

// 👇️ ['id', 'name']
console.log(Object.keys(obj));

const isEmpty = Object.keys(obj).length === 0;
console.log(isEmpty); // 👉️ false

The Object.keys method returns an empty array if the object has no key-value pairs (if it's empty).

App.js

Copied!
const obj = {};

// 👇️ []
console.log(Object.keys(obj));

const isEmpty = Object.keys(obj).length === 0;
console.log(isEmpty); // 👉️ true

An alternative approach is to try to iterate over the properties of the object. If there is even a single iteration, then the object is not empty.

App.js

Copied!
function isEmpty(obj) {
  for (const property in obj) {
    return false;
  }
  return true;
}

console.log(isEmpty({})); // 👉️ true
console.log(isEmpty({id: 1, name: 'Alice'})); // 👉️ false

If there is even 1 iteration, we know that the object has at least 1 key-value pair and is not an empty object.

If there aren't any iterations, then the object is empty.

How to check if an Object is Empty in React

Check if an Object is Empty in React #

Borislav Hadzhiev