React vs Preact vs Inferno

Obviously React has changed the landscape of front-end development. In the Virtual DOM Kennel, it's the "Big Dog". And it's been gettin' it on. In fact, the library has spawned two similar libraries that (when it comes to Web Development) give React a run for its money.

I'm talking about Preact and Inferno. We're gonna go over the pros and cons of both in comparison to React.

Preact

Preact is pretty darn popular. It has over 26k stars on Github and 1/4 million downloads per week on NPM. So this puppy is barking.
npm: https://www.npmjs.com/package/preact
Github: https://github.com/preactjs/preacthttps://github.com/preactjs/preact

It differs from React in a few ways:

1. There is no synthetic event system. React ships its own (very heavy) Synthetic Event system that offers a host of benefits but comes with a larger size and slower performance. Preact uses native addEventListener so it trusts/uses the DOMs API to a performance and size benefit.
2. Preact doesn't push JSX as it's client-side templating tool. In fact, the original author of Preact offers his package htm as an alternative. One of the benefits of this is difference is you can use regular old HTML attributes like class instead of className.
3. An added feature in Preact is that its Component.render method signature has state and props as parameters, so you can access them easier within the JSX or htm.

Component.render({props}, {state});

Pros:

• Preact is a lot faster and lighter than React. And it aims to be "mostly" compatible with React.
• To have near 100% compatibility Preact offers an additional package: preact-compat.
• Preact is compatible and even encourages using htm over JSX so you can unlock regular HTML attributes.
• Preact is popular. This means that it's gonna have better support, a larger ecosystem and a quicker fixes.
• It offers its own Server Side Rendering, routing, and other popular add-ons.

Cons:

• At the time of writing, Hooks are in a separate preact package: preact/hooks. (Though some people may see this a pro)
• At the time of writing, Preact only has experimental support for Lazy and Suspense components.
• Preact is kind of shoe-horned into a "React clone" category. A lot of development on the library will be to mimic React and not to innovate in its own way.
• If you need a React component or package you have to use an additional library. preact/compat makes your project larger and slower but is the only way to bridge the gap between React-based npm packages and Preact.

Inferno

Inferno is a React-eque component library. It has over 14k stars on Github and about 9k downloads per week on npm.
npm: https://www.npmjs.com/package/inferno
Github: https://github.com/infernojs/inferno

Inferno is different from React in the following ways:

1. It only offers a partial Synthetic Events system. So only certain events are synthesized. This is for performance reasons.
2. It is built explicitly for the DOM.
3. It has lifecycle methods on functional components
4. Inferno setState is synchronous by default and becomes async when chained (it will batch update for performance)

Pros:

• It's lightweight (but not as light as Preact)
• It really is "insanely fast". Some of the demonstrations will actually blow you away and it even offer internal objects for optimization that will really crank up the speed.
• It doesn't aim to mimic React entirely. In fact there are some difference (lifecycle methods on functional components) that truly set it apart from React
• Inferno styles are set with regular old CSS property. There's no need to write the property as backgroundColor. You can use background-color.
• It offers its own Server Side Rendering, routing, and other popular add-ons.

Cons:

• It has a MUCH smaller community. Support is slower and ecosystem is a lot smaller. Expect a longer wait time (or contribute yourself) to get 3rd party libraries and components.
• There is no Lazy, Suspense, Memo, or Hooks support. At the time of writing these features are being considered, but my money is on library remaining small.
• Since setState is synchronous you will experience differences from React. There's no real way around this.
• If you need a React component or package you have to use an additional library. inferno/compat makes your project larger and slower but is the only way to bridge the gap between React-based npm packages and Inferno.

Conclusion

I've used all three libraries. The real benefit of React is how easily it can port to React Native and its support. In terms of performance, only really really heavy DOM manipulation will reveal the gains of Inferno or Preact over React.
This last point is spicy: I don't like hooks. I find them to be a little sloppy and to introduce less uniform standards. For this reason I really like Inferno's support for lifecycle methods on functional components.

In the end, React is still the top dog. But Preact is pretty close behind. The added benefit a larger Preact ecosystem and community makes me prefer Preact over Inferno. I would definitely recommend giving Preact a spin (even if that means you simply add the preact/compat compatibility layer).

Resources:

Here are the sites for each library:

React: https://reactjs.org/
Preact: https://preactjs.com/
Inferno: https://infernojs.org/

Comments

[Rune Jeppesen]

Thank you for this - I am on the Preact wagon privately but React at work :/

You copy-pasted a 'Con' under Inferno, from the Preact section

[Tamb]

Good catch. Thank you! I'm loving Preact.

[Yisar]

github.com/yisar/fre
Fre is only 2KB, and it has concurrent mode.

[Ivan Nikitin]

Both Preact and Inferno libraries can work as an alias for React. When using Webpack it's necessary to simply write the following to replace React with an alternative library.

resolve: {
    alias: {
        "pica": path.join(__dirname, "./node_modules/pica/dist/pica.js"),
        "react": "preact/compat",
        "react-dom/test-utils": "preact/test-utils",
        "react-dom": "preact/compat",     // Must be below test-utils
        "react/jsx-runtime": "preact/jsx-runtime",
    },
    extensions: [".ts", ".tsx", ".js"]
},

I tried both with a quite cumbersome application with about 900 DOM nodes. Both Inferno and Preact made the JS file smaller. For example, Preact saved 100Kb after minification, but before gzip.

RAM usage was almost the same between all 3 versions with production build.

I noticed that Inferno used some % of CPU even without user activity. Preact had some frame drops when a lot of elements moved at once around the screen. Neither of these problems was present with React.