The React Alternative: Preact

The React Alternative: Preact

I guess it was about that time for someone to build an “optimized version” of the React framework to try and supercede its predecessor, and that’s what Preact is.

Preat eliminates some of the pain points of React, like passing props and state right into the render function for you (which I really like). I’m curious to know how it claims to be so much faster than react (I saw some working examples and it blew my mind how fast the dom was updating). One way I saw is that they do not use synthetic events, relying on the browser’s native addEventListener. The diff implementation of the virtual dom is different though, although I have not dug into the guts of it to see exactly how yet. Another thing is Preact transpiles jsx into hyperscript, whereas React calls the createElement function and transpiles to javascript. Apparently hyperscript was the precursor to jsx.  This article explains their reasoning over choosing hyperscript.

Most importantly, my biggest worry if I were to consider using it would be losing out on the massive React ecosystem. The number of libraries and components that I have pulled in from this ecosystem to my own projects is massive, so I’d be really worried about compatibility with them. For an existing react app, You can just use aliases in webpack to link the react import to load “preact-compat” instead.

Is Preact Worth Learning?

My biggest concern was about losing access to the massive React ecosystem and if there would be compatibility issues if you replaced React with Preact. Adding the preact-compat alias to the bundler provides a compatibility layer for complex React components.

If you care anything about performance, then I think the answer to this question is a resounding yes. This is in large part due to the use of the browser’s native addEventListener instead of the synthetic events that React uses. Synthetic events are used for patching older browsers like IE8, but I am of the opinion that if you’re still using a browser that old, you should be forced to upgrade. The documentation says that the diff implementation is “simple and more predictable” and is therefore faster than React’s diff implementation. I could not find specific details on this though. There’s some performance features that Preact includes that I was really impressed with: update batching, async rendering, DOM recycling, and optimized state changes with Linked State.

I think I will be spending a good amount of time with Preact in the near future. The tiny size of the library alone is enough to make you want to switch to it.



Leave a Reply

Your email address will not be published.