Handling of "ref" and "key" in different virtual-DOM-based UI libraries (React, Inferno, Preact, etc.)

Question

After calling

<MyComponent x="aaa" y="bbb" key="0" ref={someRef}/>

the props object is

{ x: 'aaa', y: 'bbb' }

in React and Inferno, but it is

{ x: 'aaa', y: 'bbb', key: '0', ref: someRef }

in Preact.

Does anybody know the reasons for those different design decisions and maybe some advantages and disadvantages of each solution?

Answer 1

Disclaimer: I work on preact.

Passing both the key and ref prop into a component was a bug that we fixed for our upcoming major release. An alpha is scheduled to land on March 4th 2019.

There is even an open RFC to pass ref via props again. We're very supportive of that change, because that would make forwardRef redundant.

Answer 2

This answer is taken from React GitHub Issues

The reason is that the concept of a key is something that is controlled by React internals before your component gets created. The same thing for refs. You can think about an array of ReactElements as a Map.

A Map is a series of key and value tuples. A React fragment is a series of key and props tuples (and also type and ref). The key is designed to decide what the value is in each slot, but not the actual value itself.

If you're reading a prop named key you might be overloading the meaning of key or accidentally using it for something unrelated.

This change makes the concept a bit more strict. This helps avoids bugs with transferring props to another component which shouldn't bring the key and ref along with it. It also helps performance by ensure that types in React internals are consistent and stable.

I would suggest renaming or duplicating the prop name as a possible fix if you really need to access it.