explaingit

infernojs/inferno

16,417JavaScriptAudience · developerComplexity · 3/5LicenseSetup · easy

TLDR

Inferno is a React-compatible JavaScript UI library built for raw rendering speed, same JSX and component patterns as React but with a faster virtual DOM, aimed at real-time dashboards and large DOM trees.

Mindmap

mindmap
  root((inferno))
    What it does
      Fast UI rendering
      Virtual DOM diffing
      React-compatible API
    Speed techniques
      Specialised JSX compilers
      Bitwise shape flags
      Selective normalisation
    Extra features
      Functional lifecycle hooks
      Controlled form elements
      Portals and fragments
      Server-side rendering
    Tech Stack
      JavaScript
      TypeScript
      Babel or SWC
    Compared to
      React but faster
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a real-time data dashboard that updates hundreds of DOM nodes per second without dropping frames.

USE CASE 2

Replace React in an existing project to cut render times on pages with very large component trees or slow devices.

USE CASE 3

Render Inferno components on the server with inferno-server for faster initial page loads.

Tech stack

JavaScriptTypeScriptJSXBabelSWCnpm

Getting it running

Difficulty · easy Time to first run · 30min

Requires a Babel or SWC config change to use Inferno's JSX pragma instead of React's, otherwise installs like any npm package.

MIT, use freely for any purpose including commercial with no conditions beyond keeping the copyright notice.

In plain English

Inferno is a JavaScript library for building user interfaces that takes the same overall design ideas as React, components, one-way data flow, JSX templates, a familiar component lifecycle, and reimplements them with raw runtime speed as the headline goal. The maintainers explicitly position it as a React-like option for cases where rendering performance matters most, such as real-time data dashboards or pages with very large DOM trees. Under the hood Inferno still works through a virtual DOM (an in-memory description of what the page should look like), but it bakes in a number of tricks to make updates cheap. Its own JSX compilers, available as plugins for Babel, TypeScript and SWC, turn your component code into specialised "createVNode" calls instead of generic ones, so the engine can take shortcuts at runtime. The diffing process uses bitwise flags to remember the shape of objects, and child nodes are only normalised when absolutely necessary. On top of that the library adds features that React does not have out of the box, like lifecycle events on functional components, controlled form elements, portals, fragments, refs and special animation callbacks. There is also an isomorphic server-side rendering package called inferno-server. You would reach for Inferno when you want the familiar React mental model but cannot afford React's runtime cost, for example on slow devices, in embedded web views, or on pages where a small change must repaint a huge tree without dropping frames. It runs in modern browsers without polyfills, is MIT-licensed, and ships as an npm package. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Convert this React functional component to Inferno: [paste component], swap the imports from react and react-dom to inferno and inferno-dom, keep the JSX unchanged.
Prompt 2
Show me how to configure Babel to use the Inferno JSX transform so my existing .jsx files work with Inferno instead of React.
Prompt 3
Write an Inferno component that renders a live-updating list of 1000 items using its functional component lifecycle hooks, and explain which Inferno optimisations make this faster than React.
Prompt 4
How do I add server-side rendering to an Inferno app using inferno-server and hydrate it in the browser?
Open on GitHub → Explain another repo

← infernojs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.