React.memo 和浅层比较

Question

I was reading the following article on React.memo https://blog.bitsrc.io/optimize-your-react-app-with-react-memo-ec52447b09ba

I had 2 specific questions around the article.

1. As per the link, it says "In function components React only performs two optimizations by default. First, it avoid the re-render process if by shallow comparison the new state is equal to the old state. Second, it only updates the DOM nodes which have changed and not the whole DOM as updating DOM is costly."

I was confused when it says React by default, compares the state. My understanding is that happens only if we use React.memo. Am I missing something here?

2. As per the Shallow Comparison example shown on the site, it seems to suggest different behavior for objects v/s arrays. Not sure if that is correct as well. I thought both arrays/objects would get a new reference each time and hence shallow comparison would return false every time for them?

Specifically, this example on the link confused me;

const car1 = {
  color: 'red',
  model: 'S',
};

const car2 = {
  color: 'red',
  model: 'X',
};

const car3 = {
  color: 'red',
  model: 'S',
};

shallowCompare(car1, car2); // false
shallowCompare(car1, car3); // true - Why would this return true ???




const arr1 = [1];
const arr2 = [1];
const arr3 = arr1;

console.log(arr1 === arr2);     // false - Why is this different compared to object behavior ?
console.log(arr1 === arr3);     // true

Also, from my end I tried using below custom function for shallow compare and observed both object and array to behave similarly. This function is not part of the article link above.

function areEqualShallow(a, b) {
    for(var key in a) {
        if(!(key in b) || a[key] !== b[key]) {
            return false;
        }
    }
    for(var key in b) {
        if(!(key in a) || a[key] !== b[key]) {
            return false;
        }
    }
    return true;
}

Answer 1

Let's start with the fact that the most reliable source is what published by React team.

I was confused when it says React by default, compares the state. My understanding is that happens only if we use React.memo. Am I missing something here?

It's true, you can't customize how you compare state in React.

Although there are workarounds they don't consider "by default", for example by saving the previous state in a reference and conditionally changing state by it:

useEffect(() => {
  if (areEqualCustom(prevState.current, newState)) {
    setState(newState);
    prevState.current = newState;
  }
}, [newState]);

---

As per the Shallow Comparison example shown on the site, it seems to suggest different behavior for objects v/s arrays. Not sure if that is correct as well. I thought both arrays/objects would get a new reference each time and hence shallow comparison would return false every time for them?

You are right, the author's definition for "shallow comparison" is wrong, because "shallow comparison" is defined by the Strict equality ( === ) operator .

// Blog example

const car1 = {
  color: 'red',
  model: 'S',
};

const car3 = {
  color: 'red',
  model: 'S',
};

// car1 === car3
shallowCompare(car1, car3) // always false

// React example
const onClick = () => {
  // Don't mutate state in React.
  stateObject.x = 5;
  // prevState === stateObject (true)
  setState(stateObject); // no render

  // Instead use Object.assign / shallow copy
  setState({ ...stateObject, x: 5 }); // always render
};

Note that in the last example, even if the previous state and the current state are deeply equal it still will rerender.

setState({ x: 5 }); // always render
// even if prevState = { x: 5 }

[1] === [1] Why is this different compared to object behavior?

It's not, it's the same behavior.