rax
rax copied to clipboard
[BUG] child node shouldn't update with the number of children changed
import { createElement, useState } from 'rax';
function Child() {
console.log('Child render');
return <div>Child</div>;
}
function Parent() {
const [arr, setArr] = useState([1]);
return (<>
<div onClick={() => { setArr([1, 2]); }}>Click</div>
{arr.map(item => <Child key={item} />)}
</>);
}
First of all, when children length is 1, props.children is the first element. And then when children length added to more than 1, it will compare props.children type Array with Object, so must be different. The result of this is the first element is rerendered.