Skip to content

Inferno vs React

Angel Rey edited this page Dec 23, 2020 · 1 revision

This document is out of date, React Fire is going to implement many of the Inferno speedups: https://github.com/facebook/react/issues/13525

Docs:

How does React work internally?

  • React components are functions that return virtual dom nodes aka React Components
  • components have lifecycle events managed by React instead of the browser
  • components have a synthetic event system that wraps browser events
  • VirtualDOM diffed against real DOM on every render

Why react rendering is slow

The bible: https://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html

  • There are basically 3 layers that can each contribute to slowness:

    • react components receiving new props/state
    • react components running render() to produce a virtual dom node
    • virtual dom node being rendered to the real DOM
  • Each layer gets 10x slower as you get closer to the DOM, so it's important to avoid rendering as early in the layers as possible, e.g. don't pass new props to a component if it doesn't need to re-render, or use shouldComponentUpdate to skip rendering when not needed

  • React doesn't inspect state/props contents deeply to decide whether to render, it just rerenders, that's why implementing a real shouldComponentUpdate is critical if you care about performance

Who created inferno and why

  • "if React were re-written from scratch, this is how it would be done", inferno fixes many of the design pitfalls that led to React becoming slow

How does inferno work internally

https://github.com/infernojs/inferno#differences-from-react

  • partial synthetic event system for performance
  • diffs against previous render's VirtualDOM instead of the real DOM, much faster
  • built for web only, no React Native support
  • no string refs

Why we want to switch

  • ~8kb Inferno vs 45kb React (gzipped), much faster load and parse time
  • React can never make the fundamental, backwards-incompatible API changes needed to get to inferno speeds (mainly getting rid of synthetic events)
  • inferno-compat and API similarities mean switching back and forth is easy if needed
  • same development setup and browser tooling

The process of converting from one to the other

https://infernojs.org/docs/guides/switching-to-inferno https://jhsware.github.io/inferno-bootstrap-docs/basic

  • start with smaller pages like user.js, tables.js, leaderboard.js
  • change react imports to import { render, Component } from 'inferno';
  • change react-redux to inferno-redux
  • change react-bootstrap components to inferno-bootstrap
  • profile page before & after to confirm speedups