Preact: Refs should not be allowed to leak into props

[Pyrolistical]

When ref is set as an attribute it should be handled separately from props. It should never be allowed to leak into props.

I found a bug where preact-emotion (https://github.com/emotion-js/emotion/issues/718) set ref=undefined, which is passed along to reach router and caused https://github.com/reach/router/issues/73

Repo case in preact: https://codesandbox.io/s/n3mpmk2054
Works fine in react: https://codesandbox.io/s/887o6v4p9j

[Kanaye]

The reason is that ref (and key) are only deleted when their value is truthy.
https://github.com/developit/preact/blob/86361f020ffb85cea9aac6af5a07f2682da425ed/src/vdom/component.js#L22-L23

@developit optimized it 2 years ago to delete ref conditional
https://github.com/developit/preact/commit/d1548a5f2283282c48be40b758f60ac9a3efc351

I'm not sure how major this optimization is and would either roll back to a straight delete or change the condition to

if ('ref' in props) delete props.ref;

What do you think @developit ?

[developit]

Ah interesting. We could use !=null in those checks to fix the issue without inflating the size at all:

 if ((component.__ref = props.ref)!=null) delete props.ref; 
 if ((component.__key = props.key)!=null) delete props.key; 

Thanks for the investigation @Kanaye! Want to PR the change?

[Kanaye]

You 're welcome.
Just spending some time on the preact codebase to get more familiar with it.
It's always good to have some understanding on how frameworks work under the hood.
And I guess I can still learn a lot about minimizing code size 😄

[onstash]

I believe this issue can be closed as a related pull request has been merged. Ping @developit @lukeed.