React Native - hooks useState empty array

Question

Consider the following piece of code in React Native:

import React, { useState } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [recommendations, setRecommendation] = useState<any[]>([]);
  return (
    <View>
      {recommendations != [] ? 
      (
        <Text>A</Text>
      ) : (
        <Text>B</Text>
      )}
    </View>
  );
}

Currently this always returns A and never enters B. Why?

Answer 1

in short, because the condition recommendations != [] always evaluates to true. If you want to compare arrays, you'll need to do a deep comparison. This article may be helpful: How to compare arrays in JavaScript?

Answer 2

The expression you are using always returns true. That's why you get A as output.

If you want to return B when there are no elements in the array and A when there are, you can use the length of the array to achieve this.

import React, { useState } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [recommendations, setRecommendation] = useState<any[]>([]);
  return (
    <View>
      {recommendations.length ? 
      (
        <Text>A</Text>
      ) : (
        <Text>B</Text>
      )}
    </View>
  );
}

Answer 3

The MDN documentation says the following about comparison operators:

Features of comparisons:

• Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
• Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another.
• Two Boolean operands are strictly equal if both are true or both are false.
• Two distinct objects are never equal for either strict or abstract comparisons.
• An expression comparing Objects is only true if the operands reference the same Object.
• Null and Undefined Types are strictly equal to themselves and abstractly equal to each other.

...

If both operands are objects, then JavaScript compares internal references which are not equal when operands refer to different objects in memory.

Objects are compared by reference. An array is also an object. This means [] == [] will always result in false since they are not the exact same object (with the same reference). This also means [] != [] will always be true for the same reason.

If you want to check for en empty array use the length property:

<View>
  {recommendations.length ? 
  (
    <Text>Not Empty</Text>
  ) : (
    <Text>Empty</Text>
  )}
</View>

This uses the fact that an empty array has length 0, which is falsy. If you rather be more explicit recommendations.length != 0 would have the same result.