1k Components
This benchmark measures creation time of multiple functional components.
Rendering speed is heavily bottlenecked by patchStyle method.
Example | View source...
DBMonster
This benchmark measures time of patching same number of elements.
Example | View source...
DBMonster (MobX)
DBMonster with the data kept in a MobX observable and the table rendered by an inferno-mobx observer.
Example | View source...
Event handlers
This benchmark measures mount, patch and unmount time of 500 list items with delegated and native event handlers, hoisted, linkEvent and inline functions.
Example | View source...
UI Benchmark
InfernoJS implementation of UI Benchmark. This benchmark uses optimization patterns specific to InfernoJS only.
Example | View source...
UI Benchmark (Inferno-compat)
Same as regular ui benchmark implementation, but uses inferno-compat to track performance regressions in compatibility layer.
Example | View source...
UI Benchmark (Normalization)
This version of UI Benchmark tracks performance regressions in Inferno's normalization algorithm. Do not write code like this.
Example | View source...
UI Benchmark (Lifecycle)
This version of UI Benchmark tracks performance regressions in Inferno's lifecycle process. Do not write code like this.
Example | View source...
UI Benchmark (same as React)
This is InfernoJS implementation of UI Benchmark using identical application level code with React implementation.
Example | View source...
Animations demo
This demo uses inferno-animation to animate multiple elements of a card when it is added and removed from the DOM.
Example | View source... | View CSS...
Animating child when parent is mounted/unmounted
Here the animation is only performed on a child component of page when the page is mounted and unnmounted.
Example | View source... | View CSS...
Animations on mount and unmount
This is an implementation of inferno-animation where components are animated when added, removed or moved in the DOM.
Example | View source... | View CSS...
Global animations
Component exists on two different "pages" and when we switch between them it animates between the two positions.
Example | View source... | View CSS...
Async render
Render 2 x 2k rows using loop in componentDidMount.
Example | View source...
React Compatibility
Using React compatibility extension.
Example | View source...
Input Forms
Inferno and HTML-forms.
Example | View source...
Router <Prompt> back button
Reproduction for inferno-router's <Prompt> not prompting when navigating with the browser back button on iOS Safari. Logs every popstate, history call and confirm on the page itself.
Example | View source... | Read more...
Inferno and SVG
The tiger rendered with an SVG in Inferno.
Example | View source...
Inferno and MathML
MathML formulas rendered with Inferno.
Example | View source...
Animation glitches
Reproduces previous inferno-animation glitches in keyed lists, nested lists and global animations, and reports whether each one still occurs.
Example | View source... | View CSS...
autoFocus
Checks that autoFocus focuses elements that Inferno mounts, including the root element of a new tree. Each case runs on its own page load.
Example | View source...