React props comparison: "_.isEqual" versus "==="

Question

My issue is that lodash's deep comparison of equality and ==='s strict equality return different values when comparing fields of nextProps and self.props in the componentWillReceiveProps lifecycle method.

1. Does this mean that the values of these properties must be of different types? I'm assuming _.isEqual does do type conversion to compare equality since === does not.
2. Is it recommended to use _.isEqual when doing equality checking between fields of nextProps and self.props?

Here's my specific example -

componentWillReceiveProps(nextProps){
  (nextProps.obj === self.props.obj);        // false
   _.isEqual(nextProps.obj, self.props.obj); // true

   typeof(nextProps.obj);  // object
   typeof(self.props.obj); // object

   nextProps.obj;   // { k1: "v1", k2: "v2", k3: "v3" }
   self.props.obj;  // { k1: "v1", k2: "v2", k3: "v3" }
}

Does anyone know what might be going on?

Answer 1

_.isEquals :

Performs a deep comparison between two values to determine if they are equivalent. it will return true if the values are equivalent, else false.

Lodash _.isEquals

Example:

var object = { 'a': 1 };
var other = { 'a': 1 };
 
console.log(_.isEqual(object, other));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

=== :

For strict equality the objects being compared must have the same type and:

compared must have the same type and:

• 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 objects are strictly equal if they refer to the same Object

Comparison Operators - MDC

Example:

var object = { 'a': 1 };
var other = { 'a': 1 };
 
 
console.log(object === other);
// => false