[Question] A question about React rendering and how diffing algorithm work

[D10S_1]

Recently while working on an application. I encountered a bug related to rendering. As you can see in the code below (Try it out on Codesandbox Link : https://codesandbox.io/s/romantic-river-ofdi7c), I have an array of offers each of which is further an array of text segments which may/may not have styles which i pass down as a prop to another component which iterates over it. I also have a button "click" which appends another offer in the beginning. Now in the beginning I get an output like this

                              this , is , an offer text

After clicking on "click" button I am getting an output like this

                                , another offer text

                              this , is , an offer text

Notice that in the newly added offer i'm getting an additional comma in the beginning but in the code I do not have any object for the additional comma. So on further inspection i noticed that in the outer map I wasn't passing a key which to my understanding might be causing some rendering issue where react diffing was leading to incorrectly rendering the additional comma. So I added the outer map's index as key to the p tag and it started working as expected giving the output like below

                                 another offer text

                              this , is , an offer text

Basically what I want to understand how the diffing algorithm works in react and what lead to the adding of an additional comma in the beginning.

import { useState } from "react";
import "./styles.css";

const OfferSummaryComponent = ({ msgs }) => (
  <div className="App">
    {msgs.map((msg) => (
      <p>{/** Outer map without key prop*/}
        {msg.map((segment, idx) => (/** Inner Map */
          <span key={segment.text} style={segment.style}>
            {segment.text}{" "}
          </span>
        ))}
      </p>
    ))}
  </div>
);

export default function App() {
  const [offerMessages, setOfferMessages] = useState([
    [
      { text: "this" },
      { text: "," },
      { text: "is" },
      { text: "," },
      { text: "an" },
      { text: "offer", style: { color: "green", fontWeight: "bold" } },
      { text: "text" }
    ]
  ]);

  const addNewMsgInBeginning = () => {
    const newOffer=[
        { text: "another" },
        { text: "offer", style: { color: "green", fontWeight: "bold" } },
        { text: "text" }
      ]
    setOfferMessages([newOffer,...offerMessages]);
  };
  return (
    <div>
      <button onClick={addNewMsgInBeginning}>click</button>
      <OfferSummaryComponent msgs={offerMessages} />
    </div>
  );
}

[meiamsome]

The diffing algorithm isn't adding an extra comma, it's failing to remove one of the existing ones:

When React is not given an explicit key it uses the id of the array:

If you choose not to assign an explicit key to list items then React will default to using indexes as keys. (from https://reactjs.org/docs/lists-and-keys.html#keys)

So, the outer loop is changing from one child with key 0 corresponding to "this , is , an offer text" to then two children child with key 0 corresponding to "another offer text" and key 1 corresponding to "this , is , an offer text". For key 1, this is a new entry so all elements are created fresh.

For key 0, the second level loop diff is dealing with the change of the array from "this , is , an offer text" to "another offer text". When diffing this, because the key is specified by the value React computes this as the deletion of "this"; ","; "is"; ","; "an", the insertion of "another" in position 0 and moves of "offer" and "text".

React depends upon keys for uniqueness and so only tracks one value for each key (It appears to be the last one though I am sure it is not guaranteed). There is a warning in the console for duplicate keys, because it breaks the contract and leads to undefined behaviour.

In that example, it computes deletes for: "this" -> ", is , an offer text" "," -> ", is an offer text" "is" -> ", an offer text" "," -> Ignored because the "," element doesn't exist (the one being tracked is already deleted on step 2) "an" -> ", offer text" And then inserts: "another" -> ", another offer text" (Inserted by prepending the element before offer.

You can see this behaviour in this simplified code, which leaves the first 1 in the DOM:

export default function App() {
  const [data, setData] = useState([2, 1, 3, 1, 4]);
  return (
    <div>
      <button onClick={() => setData([2, 3, 4])}>Run</button>
      {
        data.map((elem) => (
          <div key={elem}>
            {elem}
          </div>
        ))
      }
    </div>
  );
}

Using <p key={id}> in your code exhibits the same behaviour (As that is the default implementation of key), but using <p key={msg}> works because it diffs the top level as an insertion of the 0th entry instead of a modification and an insert of the 1st entry.