[Hooks] Highlight Updates incorrectly reports an updates in a tree component #1216
Description
I'm creating a demo of stability of Microstates trees. My goal was to show that Microstates re-uses references between transitions allowing caching of trees of children based on reference to a microstate.
function FamilyTree({ person }) {
let name = useMemo(
() => {
console.log('Updating name to', person.name.state);
return (
<input
value={person.name.state}
onChange={e => person.name.set(e.target.value)}
/>
);
},
[person.name]
);
let father = useMemo(() => <FamilyTree person={person.father} />, [
person.father
]);
let mother = useMemo(() => <FamilyTree person={person.mother} />, [
person.mother
]);
return (
<>
{name}
{person.name.state && (
<ul>
<li>Father: {father}</li>
<li>Mother: {mother}</li>
</ul>
)}
</>
);
}In this example, I'm memoizing children based on references to microstates in person microstate. I added a console log to log when an input is being re-rendered. Here is a screen recording of this in action.
To reproduce this:
- Create a sandbox with the demo app
- Open the apps live url in the browser
- Open React Devtools and activate "Highlight Updates"
- Enter names a few level deep
I would expect to only see the input that I'm highlighting update, but it's showing that parent's input fields are updating as well. The console log shows that only one input is being updated when an input is changed. I suspect that it's highlighting parent elements where children are changing, but I wouldn't expect this to be visible.
Here is the demo code https://github.com/taras/microstates-use-state