Guide · Open source
How to use Inferno: install, render components and optimize
Updated · written with AI from the project's own documentation and checked against our catalogue data
Inferno is an open-source JavaScript library for building user interfaces, with an API modeled on React. This guide shows you how to get the source, render a component, write a class component with state, use JSX through a compiler plugin, and render on the server. By the end you will know which parts of React knowledge carry over and which parts you need to check.
Infernoinfernojs/inferno · ★ 16.5k · MIT Install options & downloads Quick start
- 1Clone the repository. Run the git clone command from the README to download the Inferno source and examples.
- 2Read the code examples. Open the render and component examples in the README to see the basic pattern.
- 3Render a component. Import render from inferno and mount your root component into a DOM element.
- 4Add state with a class component. Extend Component, set this.state in the constructor and read it in render.
- 5Set up JSX compilation. Choose the SWC, Babel or TypeScript plugin that matches your build, and keep its major version in line with Inferno.
- 6Optimize with child flags and check support. Use child flags where children have a fixed shape, and confirm your target browsers meet the runtime requirements.
What Inferno is and who it suits
Inferno describes itself as a React-like library for building high-performance user interfaces on both the client and server. Its stated main goal is the fastest possible runtime performance for web applications, and it is especially aimed at views that update with real-time data or render large DOM trees.
Components, props, state and lifecycle concepts work much as they do in React, so developers who already know React will feel at home. Inferno is a separate library, though, with its own plugins and compatibility details, so React packages are not automatically drop-in.
- Good fit: developers who already know React and want a similar API
- Good fit: projects that re-render often with live data or large DOM trees
- Good fit: teams that want server-side rendering through inferno-server
- Less suited: teams that depend on the React ecosystem of libraries and tooling
How do you get the Inferno source code?
The README gives a clone command for the repository. Run it in a terminal to download the source, examples and documentation to your machine.
The project's badges point to a package named inferno on npm, so the library is also distributed through a package manager. Check the official docs at infernojs.org for the current install steps for your project setup.
git clone https://github.com/infernojs/infernoHow do you render your first component?
Import render from the inferno package and call it with a component element and a DOM node. The example below passes a message prop to MyComponent and mounts it inside the element with the id app.
In this example JSX is used. JSX is optional in Inferno: you can also use hyperscript or createElement, as React does. Keep in mind that compile-time optimizations apply only to JSX.
import { render } from 'inferno';
const message = 'Hello world';
render(
<MyComponent message={ message } />,
document.getElementById('app')
);How do you write a component with state?
Inferno supports ES6 class components in the same style as React. Set initial state in the constructor, and read it in render. The example keeps a counter in state and displays it inside a span.
Inferno also supports lifecycle events on functional components, which React does not, according to the README.
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')
);How do you compile JSX for Inferno?
Inferno's JSX is compiled with a plugin for your build tool. The README lists plugins for SWC (for TSX and JSX), Babel (for JSX) and TypeScript (for TSX). Each plugin's major version must match the major version of Inferno, and JSX compiled by older plugin versions will not work with newer Inferno.
Inferno uses its own JSX compilers, which produce monomorphic newVNode calls instead of createElement calls. This is one of the main sources of its runtime speed.
- SWC plugin: inferno swc-plugin for TSX and JSX
- Babel plugin: babel-plugin-inferno for JSX
- TypeScript plugin: ts-plugin-inferno for TSX
How do child flags speed up rendering?
By default Inferno checks the children of an element at runtime, a process called normalization. If you know the shape of the children, you can tell the JSX compiler with a child flag, such as $HasVNodeChildren for a single element or component, or $HasTextChildren for text only. Inferno then skips normalization for that node.
The trade-off is that you take responsibility for correctness. If a value does not match the declared shape, for example a null where a single element is expected, the application can crash at runtime. All child flags are documented in the Inferno optimizations guide.
How do you render on the server?
Inferno can render on both the client and the server. The README names the inferno-server package for server-side (isomorphic) rendering. Use it when you need markup generated on the server, for example for first page load.
Check the package documentation for the exact server API, since the README does not show it.
What runtime and browser support do you need?
The README lists features the runtime must have for the current major version, including Promise, String.prototype.includes(), String.prototype.startsWith(), Array.prototype.includes(), Object.spread() and for...of. It recommends checking compatibility for your target environments.
The project says it runs its test suite without polyfills and tests with a set of browsers, and that it may also work on older browsers. Test against your own target browsers before you commit to it.
- Confirm your target browsers support the runtime features listed in the README
- Test your app on the browsers you actually need to support
What people use it for
- Dashboards that update often with real-time data
- Views that render large DOM trees, such as data tables or long lists
- Server-rendered pages that hydrate on the client using inferno-server
- Migrating a React-style component codebase to a lighter library, after checking compatibility
Frequently asked questions
Is Inferno free to use?
Yes. The repository is licensed under the MIT licence, as shown in the README badge and LICENSE.md file. Check the licence file for the full terms.
Is Inferno the same as React?
No. Inferno has a React-like API, so components, props and state work similarly, but it is a separate library with its own plugins and compatibility details. React packages and tooling may not work without changes.
Do I need Babel to use Inferno?
No. JSX is optional, and you can use hyperscript or createElement instead. For JSX, the README lists SWC, Babel and TypeScript plugins, and compile-time optimizations are only available for JSX.
How do I install Inferno?
The README gives a git clone command for the repository, and the project is also published on npm as inferno. Follow the official docs at infernojs.org for the install steps that fit your project.
Does Inferno work in older browsers?
The README says the project runs its tests without polyfills and is tested in several browsers, and that it may run well on older browsers too. It also lists runtime features that must be present, so check those against your target browsers.
What are the alternatives to Inferno?
Comparable projects named in this guide are React, Preact, Vue and Svelte. Choose React or Preact if you need a large ecosystem, and consider the others based on your team's needs.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Inferno suits developers who already know React and need fast rendering for frequently updated views or large DOM trees. Teams that rely on the React ecosystem or want a large set of beginner tutorials should pick React, Preact, Vue or Svelte instead.
Install options & downloads