How Does React Tell a Class from a Function?

React needs to call classes (including Babel output) with new but it needs to call regular functions or arrow functions (including Babel output) without new. And there is no reliable way to distinguish them.


Why Do React Elements Have a $$typeof Property?

For example, if you render <a href={}>, beware of the user whose website is 'javascript: stealYourPassword()'. Spreading user input like <div {...userData}> is rare but also dangerous.

This works because you can’t just put Symbols in JSON. So even if the server has a security hole and returns JSON instead of text, that JSON can’t include Symbol.for(‘react.element’). React will check element.$$typeof, and will refuse to process the element if it’s missing or invalid.

The nice thing about using Symbol.for() specifically is that Symbols are global between environments like iframes and workers. So this fix doesn’t prevent passing trusted elements between different parts of the app even in more exotic conditions. Similarly, even if there are multiple copies of React on the page, they can still “agree” on the valid $$typeof value.

In React, The Wrong Abstraction Kills Efficiency