比较 React.memo 组件中的 prevProps 和 nextProps 以防止不必要的重新渲染，但这很有趣

Question

I made a demo here: https://codesandbox.io/s/interesting-germain-mgd64

If you type something in one person's name, then switch to another person and type around, you will see it will change the other person's name back to the original. But it doesn't make sense why it's doing that. If I remove the whole prevProps and nextProps comparison it works fine.

Though this works in a much more simpler example just fine. I'm not sure why it's not working in this scenario though.

More detail on what I'm trying to do as far as comparing props found here: https://reactjs.org/docs/react-api.html#reactmemo

Player Component using the Memo is here:

export const Player = React.memo(({player, modifyPlayer}) => {
  const handleOnChange = React.useCallback((event) => {
    modifyPlayer(player.id, event.target.name, event.target.value);
  }, [player, modifyPlayer]);

  return (
    <div>
      <input type={"text"} name={"firstName"} value={player.firstName} onChange={handleOnChange}/>
      <input type={"text"} name={"lastName"} value={player.lastName} onChange={handleOnChange}/>
    </div>
  );
}, 
(prevProps, nextProps) => {
  // Check to see if the data is the same
  if (prevProps.player.firstName === nextProps.player.firstName
    && prevProps.player.lastName === nextProps.player.lastName
    && prevProps.player.id === nextProps.player.id) {
    return true; // Return true if they ARE the same
  } else {
    return false; // Return false if they are NOT the same
    // EVEN THOUGH THIS RETURNS FALSE IT MESSES UP THE OTHER TEXT
  }
});

App Component

function App() {
  const [playerDict, setPlayerDict] = React.useState(
    {
      id1: {
        firstName: "John",
        lastName: "Doe",
        id: 'id1'
      },
      id2: {
        firstName: "Michael",
        lastName: "Creaton",
        id: 'id2'
      },
      id3: {
        firstName: "William",
        lastName: "Shakespeare",
        id: 'id3'
      },
    }

  );
  const [playerIdList, setPlayerIdList] = React.useState(['id1', 'id2', 'id3']);

  const modifyPlayer = React.useCallback((playerId, propertyName, value) => {
    const playerCopy = {...playerDict[playerId]};
    playerCopy[propertyName] = value;
    const playerDictCopy = {
      ...playerDict,
      [playerId]: playerCopy
    };
    setPlayerDict(playerDictCopy);
  }
  ,[playerDict]);

  return (
    <div>
      <Playlist
        modifyPlayer={modifyPlayer}
        playlist={playerIdList.map(playerId => playerDict[playerId])}
      />
    </div>
  );
}

Playlist Component

export const Playlist = React.memo(({modifyPlayer, playlist}) => {
  return (
    <div>
      {
        playlist.map((player) => (
          <Player
            key={player.id}
            player={player}
            modifyPlayer={modifyPlayer}
          />
        ))
      }
    </div>
  );
});

Answer 1

That was a good head-scratcher, but I think I found the issue.

When you create your callback modifyPlayer you rightly pass playerDict as a dependency, since the callback relies on having an "up to date" version of playerDict before it can create a new version of playerDict using the latest update event. But this also means that each time the the depencendy playerDict changes (with every change event) you will get a new modifyPlayer -callback function.

But the areEqual function in the Player -component (around line 29) says that the component should only update if any of the player properties have changed (id, firstName or lastName), this means that the component never receives the updated callback-function, so it will try to update the the playerDict using the "wrong" previous version of the data (because it has a previous version of the callback function).

Including a check for equality between prevProps.modifyPlayer and nextProps.modifyPlayer makes the code behave like expected again:

// in Player.js - around line 29
(prevProps, nextProps) => {
    // Check to see if the data is the same
    if (
      prevProps.player.firstName === nextProps.player.firstName &&
      prevProps.player.lastName === nextProps.player.lastName &&
      prevProps.player.id === nextProps.player.id && 
      prevProps.modifyPlayer === nextProps.modifyPlayer
    ) {
      return true; // Return true if they ARE the same
    } else {
      return false; // Return false if they are NOT the same
    }
  }

Edit: Updated demo code here https://codesandbox.io/s/damp-surf-nu6tt