I found a problem with using ref on unkeyed children. You can observe the problem here: https://jsfiddle.net/rsm2dxb7/1/
Open the console and click Toggle. You'll see that the final dom reference being passed is null, which is wrong because the referenced div is still there.
In the example, the first child is conditionally rendered and the second child is using a ref. On click, the state changes and the first child is unmounted. The ref callback is called two times in wrong order, so the final reference value is null.
{ header && <div className="header">Header</div> }
<div ref={c=>{
console.log(c);
}}>
Content
</div>
I found a problem with using
refon unkeyed children. You can observe the problem here: https://jsfiddle.net/rsm2dxb7/1/Open the console and click Toggle. You'll see that the final dom reference being passed is
null, which is wrong because the referenced div is still there.In the example, the first child is conditionally rendered and the second child is using a
ref. On click, the state changes and the first child is unmounted. The ref callback is called two times in wrong order, so the final reference value is null.