Shallow vs Deep: Boost React with JavaScript

Imagine this: You're working on a React app, tweaking some state, and expecting a re-render, but nothing happens. You check everything—yet the component doesn’t re-render, even though you’re certain you’ve changed something. After a frustrating debugging session, you discover the issue: you didn’t understand shallow comparison. Sounds familiar? You’re not alone.

In React, the way comparisons are handled—especially in hooks—plays a significant role in determining whether your components update when expected. To fully understand this, we need to explore how shallow and deep comparisons work and why React relies on one over the other for performance optimization. Let’s break it down, focusing on memory management, re-renders, and how these comparisons contribute to React’s efficient performance.

What’s the Difference Between Shallow and Deep Comparison?

To fully grasp how comparisons affect your React app, it’s crucial to understand the difference between shallow and deep comparisons. Here’s an analogy:

Shallow Comparison: Quick and Simple

Shallow comparison is a method that checks if two objects or values are the same by reference. For primitive values (like numbers, strings, and booleans), shallow comparison simply checks if they are identical in value. For objects and arrays, it only compares the memory address of the references—not the actual contents. Even if two objects or arrays look identical, shallow comparison will return false if they are stored in different memory locations.

Example:

const obj1 = { name: "Alice", age: 25 };
const obj2 = { name: "Alice", age: 25 };

console.log(obj1 === obj2); // false (different references)

Here, obj1 and obj2 have identical properties, but since they occupy separate memory locations, shallow comparison considers them different.

Deep Comparison: Thorough and Precise

Deep comparison, by contrast, examines the contents of objects or arrays, including their nested structures. It goes beyond the reference and checks whether all properties, values, and even deeply nested objects match exactly. Deep comparison can be more accurate, but it comes at a performance cost, especially for large or complex data structures.

Example:

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };

console.log(_.isEqual(obj1, obj2)); // true

const obj3 = { a: 1, b: { c: 3 } };
console.log(_.isEqual(obj1, obj3)); // false

//another way to check . but it's not always reliable
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true (deep comparison)

Here, despite obj1 and obj2 being different instances in memory, deep comparison considers their entire structure—including nested objects—and finds them to be identical.

Why Shallow Comparison Matters in React

Now that we’ve covered the theory behind shallow and deep comparisons, let's talk about how React leverages shallow comparison for performance optimization. React’s virtual DOM is designed to be fast, and one of the key techniques React uses to minimize unnecessary re-renders is shallow comparison.

Shallow Comparison in React Hooks

React uses shallow comparison in hooks like useEffect, useMemo, and useCallback to avoid unnecessary re-execution when values haven’t changed. When a hook has a list of dependencies, React checks each dependency using shallow comparison. If the reference of a dependency has changed, React will trigger the hook again.

Example with useEffect:

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState({ key: "value" });

  useEffect(() => {
    console.log("Effect triggered");
  }, [data]); // Shallow comparison for `data`

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setData({ key: "new value" })}>Change Data</button>
    </div>
  );
}

export default App;

In this example, React performs a shallow comparison of the data object. If the setData() function creates a new reference for the object (which it does), React will recognize the change and re-run the effect. However, if the object was mutated directly (for example, data.key = "new value"), React wouldn’t detect a change because the reference remained the same.

Why Use Shallow Comparison in React?

Shallow comparison is used in React because it’s fast. Deep comparison would significantly slow down the app, especially for large and deeply nested data structures. Shallow comparison ensures that React only re-renders or re-executes hooks when absolutely necessary, improving performance and responsiveness.

Conclusion

To summarize:

Shallow comparison is a quick and efficient check that compares object references or primitive values. It’s fast and ideal for situations where you only need to know if something has changed, such as in React’s performance optimization.
Deep comparison is more thorough but slower. It checks every level of an object or array, which makes it useful when you need to ensure complete equality between two complex data structures.

In React, shallow comparison helps optimize performance by preventing unnecessary re-renders and re-executions of hooks. By understanding how shallow and deep comparisons work, you can make better decisions when writing your React applications, ensuring that they perform optimally without sacrificing accuracy or completeness.

By making smart use of comparison techniques, you’ll be able to create highly efficient and well-performing applications. Keep experimenting, and happy coding!

If you enjoyed this breakdown and want more JavaScript insights, subscribe to my newsletter! 📩🚀

Shallow vs. Deep Comparison in JavaScript: Unlocking React’s Performance Secrets