=== only tells you whether two values are the same reference. Two objects that look identical, like the props of a component before and after a re-render, or a form's saved state and its current state, are still "not equal" to it. To know whether anything actually changed, you need to compare the values themselves, all the way down.
Write a function deepEqual(a, b) that returns true when a and b hold the same data and false otherwise.
deepEqual({ id: 1, tags: ["a", "b"] }, { tags: ["a", "b"], id: 1 }); // true
deepEqual([1, [2, 3]], [1, [2, 4]]); // false
deepEqual(new Date(2024, 0, 1), new Date(2024, 0, 1)); // true
deepEqual({ a: undefined }, {}); // false
Rules
NaN equals NaN, and 0 equals -0.undefined is not the same as a missing key.0, 1, ...source and flags match.Set.prototype.has sees it).new Point(1, 2) does not equal { x: 1, y: 2 }. Instances of the same class are compared like plain objects.deepEqual({ id: 1, tags: ["a", "b"] }, { tags: ["a", "b"], id: 1 }); // true
deepEqual([1, [2, 3]], [1, [2, 4]]); // false
deepEqual(new Date(2024, 0, 1), new Date(2024, 0, 1)); // true
deepEqual({ a: undefined }, {}); // false