JIYIK CN >

To check if an array in React is empty, access its length property, e.g. arr.lengthif an array's length is equal to 0 , then it is empty. If the array's length is greater than 0, then it is not empty.

import {useEffect, useState} from 'react';

export default function App() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    if (messages.length > 0) {
      console.log('array is NOT empty');
    }

    if (messages?.length > 0) {
      console.log('array is NOT empty');
    }

    if (messages.length === 0) {
      console.log('array is empty');
    }
  }, [messages]);

  return (
    <div>
      <h2>Array: {JSON.stringify(messages)}</h2>

      <button onClick={() => setMessages(current => [...current, 'hello'])}>
        Add message
      </button>
    </div>
  );
}

The first ifstatement checks whether the length of the array is greater than 0 .

ifThe block will only run if the array is not empty.

The second ifstatement uses the optional chaining (?.) operator to avoid an error if the reference is null or undefined .

const arr = ['hi'];

if (arr?.length > 0) {
  console.log('array is not empty');
}

If the reference is null ( null or undefine ), the optional chaining (?.) operator short-circuits.

In other words, if the arr variable stores a null or undefined value, the operator will return undefined instead of trying to access the length property of the null value and causing a runtime error.

const arr = null;

if (arr?.length > 0) {
  console.log('array is not empty');
}

If you need to check whether an array is empty, check whether its length property returns 0.

const arr = [];

if (arr.length === 0) {
  console.log('array is empty');
}

If we are not sure whether a variable stores an array, we can check the type of its value before accessing its length property.

let arr = ['hello'];

if (Array.isArray(arr) && arr.length > 0) {
  // 如果此代码块运行
  // 👉️ arr 不为空
  console.log('arr is not empty')
}

We ifhave 2 conditions in the statement. We use &&the (and) operator to indicate that both conditions must be met in order for ifthe block to run.

We first check if the arr variable stores an array, and then we check if the length of the array is greater than 0 .

This approach is similar to the optional chaining approach, but I like it better because the optional chaining approach does not consider the case where arr is set to a string. Strings in JavaScript also have a length property.