Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.

Description

The main objective of the InfernoJS project is to provide the fastest possible runtime performance for web applications. Inferno excels at rendering real time data views or large DOM trees.

The performance is achieved through multiple optimizations, for example:

Inferno's own JSX compilers creates monomorphic createVNode calls, instead of createElement calls. Optimizing runtime performance of the application.
- SWC plugin inferno is a plugin for SWC. It can compile TSX and JSX
- Babel plugin inferno is a plugin for BabelJs. It can compile JSX.
- TS plugin inferno is a plugin for TSC. It can compile TSX.
Inferno's diff process uses bitwise flags to memoize the shape of objects
Child nodes are normalized only when needed
Special JSX flags can be used during compile time to optimize runtime performance at application level
Many micro optimizations

Features

Component driven + one-way data flow architecture
React-like API, concepts and component lifecycle events
Partial synthetic event system, normalizing events for better cross browser support
Inferno's linkEvent feature removes the need to use arrow functions or binding event callbacks
Isomorphic rendering on both client and server with inferno-server
Unlike React and Preact, Inferno has lifecycle events on functional components
Unlike Preact and other React-like libraries, Inferno has controlled components for input/select/textarea elements
Components can be rendered outside their current html hierarchy using createPortal - API
Support for older browsers without any polyfills
defaultHooks for Functional components, this way re-defining lifecycle events per usage can be avoided
Inferno supports setting styles using string <div style="background-color: red"></div> or using object literal syntax <div style={{"background-color": "red"}}></div>. For camelCase syntax support see inferno-compat.
Fragments (v6)
createRef and forwardRef APIs (v6)
componentDidAppear, componentWillDisappear and componentWillMove (v8) - class and function component callbacks to ease animation work, see inferno-animation package

Runtime requirements

Inferno v9 requires following features to be present in the executing runtime:

Promise
String.prototype.includes()
String.prototype.startsWith()
Array.prototype.includes()
Object.spread()
for ... of

Browser support

Since version 4 we have started running our test suite without any polyfills. Inferno is now part of Saucelabs open source program and we use their service for executing the tests.

InfernoJS is actively tested with browsers listed below, however it may run well on older browsers as well. This is due to limited support of browser versions in recent testing frameworks. https://github.com/jasmine/jasmine/blob/main/release_notes/5.0.0.md

Migration guides

Benchmarks

Live examples at https://infernojs.github.io/inferno

Code Example

Let's start with some code. As you can see, Inferno intentionally keeps the same design ideas as React regarding components: one-way data flow and separation of concerns.

In these examples, JSX is used via the Inferno JSX Babel Plugin to provide a simple way to express Inferno virtual DOM. You do not need to use JSX, it's completely optional, you can use hyperscript or createElement (like React does). Keep in mind that compile time optimizations are available only for JSX.

import { render } from 'inferno';

const message = "Hello world";

render(
  <MyComponent message={ message } />,
  document.getElementById("app")
);

Furthermore, Inferno also uses ES6 components like React:

import { render, Component } from 'inferno';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }
  render() {
    return (
      <div>
        <h1>Header!</h1>
        <span>Counter is at: { this.state.counter }</span>
      </div>
    );
  }
}

render(
  <MyComponent />,
  document.getElementById("app")
);

Because performance is an important aspect of this library, we want to show you how to optimize your application even further. In the example below we optimize diffing process by using JSX $HasVNodeChildren and $HasTextChildren to predefine children shape compile time. In the MyComponent render method there is a div that contains JSX expression node as its content. Due to dynamic nature of Javascript that variable node could be anything and Inferno needs to go through the normalization process to make sure there are no nested arrays or other invalid data. Inferno offers a feature called ChildFlags for application developers to pre-define the shape of vNode's child node. In this example case it is using $HasVNodeChildren to tell the JSX compiler, that this vNode contains only single element or component vNode. Now inferno will not go into the normalization process runtime, but trusts the developer decision about the shape of the object and correctness of data. If this contract is not kept and node variable contains invalid value for the pre-defined shape (fe. null), then application would crash runtime. There is also span-element in the same render method, which content is set dynamically through _getText() method. There $HasTextChildren child-flag fits nicely, because the content of that given "span" is never anything else than text. All the available child flags are documented here.

import { createTextVNode, render, Component } from 'inferno';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }

  _getText() {
     return 'Hello!';
  }
  
  render() {
    const node = this.state.counter > 0 ? <div>0</div> : <span $HasTextChildren>{this._getText()}</span>;
      
    return (
      <div>
        <h1>Header!</h1>
        <div $HasVNodeChildren>{node}</div>
      </div>
    );
  }
}

render(
  <MyComponent />,
  document.getElementById("app")
);

Tear down

To tear down inferno application you need to render null on root element. Rendering null will trigger unmount lifecycle hooks for whole vDOM tree and remove global event listeners. It is important to unmount unused vNode trees to free browser memory.

import { createTextVNode, render, Component } from 'inferno';

const rootElement = document.getElementById("app");

// Start the application
render(
  <ExampleComponent/>,
  rootElement
);

// Tear down
render(
  null,
  rootElement
);

More Examples

If you have built something using Inferno you can add them here:

Simple Clock (@JSFiddle)
Simple JS Counter (@github/scorsi): SSR Inferno (view) + Cerebral (state man

Inferno

Install / Use

README