lxsmnsyc / forgetti

Solve your hook spaghetti (with more spaghetti). Inspired by React Forget.
https://forgetti.vercel.app/
MIT License
352 stars 7 forks source link

Implement hoist constant JSX #31

Open SukkaW opened 1 year ago

SukkaW commented 1 year ago

Still adding test cases.

lxsmnsyc commented 1 year ago

This is like the Babel plugin, right? The only concern here is that different JSX runtimes may treat these differently, hence why I didn't do this. Another thing is we have the auto-memoized JSX. Hoisted JSX doesn't really offer any wins besides maybe saving creation time that's just probably a minor perf improvement. But, like I mentioned, I'm probably looking at what violations would this affect.

SukkaW commented 1 year ago

Another thing is we have the auto-memoized JSX. Hoisted JSX doesn't really offer any wins besides maybe saving creation time that's just probably a minor perf improvement.

The hoisted JSX can reduce the unnecessary branch call inside the component and reduce the output code size, by making hoisted JSX bailing out if (_condition) and (_euqal) ? :.

As for downsides, a potential downside would be the hoisted JSX expressions are not stored inside React/Preact's component life cycle and thus will not be thrown away when the component unmounts.

The only concern here is that different JSX runtimes may treat these differently, hence why I didn't do this

Maybe we can make it an option, and react and preact preset will have this option enabled.