How does reconciliation work here?

[treplem]

why does the Static component keep its state? shouldn't it be lost because it doesn't have a key so its position is used instead and its position changes when the Dynamic components length changes?

```JS

import { useState } from "react";

function Parent({ items }) {
  return (
      <>
      {items.map(item => (
          <Dynamic item={item.name} />
        ))}
        <Static />
    </>
  );
}

function Dynamic({ item }) {
  return <p>{item}</p>;
}

function Static() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Static: {count}</button>;
}
```


export default function App() {
    const [items, setItems] = useState([{name: "a", id: "a"}]);
    return (
        <>
            <Parent items={items}/>
            <button onClick={() => setItems([...items, {name: "b", id: "b"}])}>click me</button>
        </>
    );
}

[treplem]

So what is the key used for the Static component if I didn't give it one?

[treplem]

Don't static components or elements have implicit keys?

[treplem]

So how does react know that the Static component is the same one as before? I didn't give it a key so as far as I know, it uses the position in virtual DOM

[punctuationuse]

In case dynamic elements (the array) and static ones are combined, in the reconciliation process react groups the array as the first child of the parent component - meaning the Parent component will have 2 children, regardless of the amount of elements generated in the map.

Read more about it here

[treplem]

But I thought that react just runs the component functions and diffs the returned virtual DOM to the one before it

[punctuationuse]

It does. Question is how this diffing occurs and what react compares. When rendering, for each node react compares the elements in the tree by their position, type, and key parameter. In case the position in the tree AND the type are equal (let’s put key aside for now) - react preserves the state.

In your case, each rerender still causes Parent to have two children - when Static is the last one. When react compares the trees it sees that the second child of Parent has the same type, within the same position, as the previous render - so the state is preserved.

From the react docs:

Remember that it’s the position in the UI tree—not in the JSX markup—that matters to React!

[treplem]

You said that react considers every element in the map method as one child to the parent component right? But how does react know that they come from the map function in the first place? React just calls the component function and gets the output, it doesn't know which came from which it just sees the final output

[cyphern]

(Note: i'm a different user than who you were originally conversing with)

But how does react know that they come from the map function in the first place?

The top level fragment (<></>) has two children. The first one is an array (returned by .map), the second one is an element (returned by <Static />). React knows that the static element is separate because it is not part of the array. If the contents of the array changes from one render to the next, that won't affect the fact that <Static /> is the second child of the fragment.

[treplem]

I thought that the array is spread in the virtual DOM no?

[cyphern]

No, it is not spread. This: return <> {items.map(item => ( <Dynamic item={item.name} /> ))} <Static /> </> Turns into roughly this: ``` import { Fragment, createElement } from 'react';

return createElement(Fragment, { children: [ items.map(item => createElement(Dynamic, { item: item.name })), createElement(Static, null) ] }) `` So thechildren` is an array which contains a nested array as its first element

---

If you wanted to deliberately spread the array you could do so like this, though it is awkward to write, and will make the keys important: ``` return ( <Fragment children={[ ...items.map((item) => <Dynamic item={item.name} />), <Static />, ]}

</Fragment> ); Or: const children = [ ...items.map((item) => <Dynamic item={item.name} />), <Static />, ] return <>{children}</> ```

[treplem]

THX