Compile JSX to direct createElement() calls

[gaearon]

Due to how webpack works today with CommonJS, we pay the cost of three object property accesses (ReactWebpackBinding.default.createElement) for every JSX call. It doesn't minify well and has a minor effect on runtime performance. It's also a bit clowny.

We should fix this to compile JSX to something like

var createElement = require('react').createElement

createElement(...)

Could be a custom Babel transform. Could be a transform that inserts _createReactElement into scope and specifies it as the JSX pragma.

[gaearon]

We should still require React to be in scope for consistency though. Hmm.

[stereobooster]

https://github.com/theKashey/jsx-compress-loader ?

[karanisverma]

Hi @gaearon I would like to pick this up! I have never worked on babel custom transfrom. it would be great if you can point me to some resource for the same(meanwhile I will google and try to understand how custom Babel transform can be implimented.)

[Rohanhacker]

We can use this:
https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

[saranshkataria]

Would be happy to pick this up if the proposed solutions do not look good enough.

[nstepien]

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
https://babeljs.io/blog/2020/03/16/7.9.0
https://babeljs.io/docs/en/babel-preset-react#runtime
The new jsx runtime could fix this.