Search code examples
reactjspreactvirtual-dominfernojs

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

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?

Solution

  • 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.