Learn Inferno - 8 Code Examples & CST Typing Practice Test

Inferno.js is an extremely fast, lightweight JavaScript library for building high-performance user interfaces. It uses a React-like API and Virtual DOM but is optimized for speed, small size, and predictable rendering.

View all 8 Inferno code examples →

Inferno Simple Counter Inferno Counter with Step Inferno Counter with Min/Max Inferno Counter with Auto Increment Inferno Counter with Double Increment Inferno Counter with Even/Odd Indicator Inferno Counter with LocalStorage Inferno Counter with Color Themes

Learn INFERNO with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Inferno Simple Counter

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch to {this.state.isDark ? 'Light' : 'Dark'} Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

Inferno Counter with Step

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, step: 5, isDark: false };

    increment = () => this.setState({ count: this.state.count + this.state.step });
    decrement = () => this.setState({ count: this.state.count - this.state.step });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+{this.state.step}</button>
        <button onClick={this.decrement}>-{this.state.step}</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter increments/decrements by a custom step value.

Let’s Try →

Inferno Counter with Min/Max

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, min: 0, max: 10, isDark: false };

    increment = () => this.setState({ count: Math.min(this.state.count + 1, this.state.max) });
    decrement = () => this.setState({ count: Math.max(this.state.count - 1, this.state.min) });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter with maximum and minimum limits.

Let’s Try →

Inferno Counter with Auto Increment

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false, auto: false, timer: null };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });
    toggleAuto = () => {
        if (!this.state.auto) {
        const timer = setInterval(this.increment, 1000);
        this.setState({ auto: true, timer });
        } else {
        clearInterval(this.state.timer);
        this.setState({ auto: false, timer: null });
        }
    };

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.toggleAuto}>{this.state.auto ? 'Stop Auto' : 'Start Auto'}</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter that automatically increments every second.

Let’s Try →

Inferno Counter with Double Increment

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    doubleIncrement = () => this.setState({ count: this.state.count + 2 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.doubleIncrement}>++</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter increments by 2 with a special button.

Let’s Try →

Inferno Counter with Even/Odd Indicator

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count} ({this.state.count % 2 === 0 ? 'Even' : 'Odd'})</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Shows whether the current count is even or odd.

Let’s Try →

Inferno Counter with LocalStorage

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: parseInt(localStorage.getItem('count') || 0), isDark: false };

    increment = () => { const count = this.state.count + 1; localStorage.setItem('count', count); this.setState({ count }); };
    decrement = () => { const count = this.state.count - 1; localStorage.setItem('count', count); this.setState({ count }); };
    reset = () => { localStorage.setItem('count', 0); this.setState({ count: 0 }); };
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Persists counter value in localStorage.

Let’s Try →

Inferno Counter with Color Themes

import { render, Component } from 'inferno';

const themes = ['light-theme','dark-theme','blue-theme'];

class Counter extends Component {
    state = { count: 0, current: 0, theme: themes[0] };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => { const next = (this.state.current + 1) % themes.length; this.setState({ current: next, theme: themes[next] }); };

    render() {
        return (
        <div className={this.state.theme}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Cycles through multiple color themes.

Let’s Try →

Frequently Asked Questions about Inferno

What is Inferno?

What are the primary use cases for Inferno?

High-performance SPAs. Real-time dashboards and charts. Embedded widgets with small footprint. React-compatible environments needing speed. Apps requiring extremely fast client-side rendering

What are the strengths of Inferno?

One of the fastest UI libraries available. Very small and lightweight. Easy migration from React. Great SSR performance. Stable API with minimal overhead

What are the limitations of Inferno?

Smaller ecosystem than React/Vue. Some advanced React features not supported. Less community activity. Fewer tutorials and third-party libraries. Maintenance pace slower than big frameworks

How can I practice Inferno typing speed?

CodeSpeedTest offers 8+ real Inferno code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Inferno Simple Counter

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch to {this.state.isDark ? 'Light' : 'Dark'} Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

Inferno Counter with Step

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, step: 5, isDark: false };

    increment = () => this.setState({ count: this.state.count + this.state.step });
    decrement = () => this.setState({ count: this.state.count - this.state.step });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+{this.state.step}</button>
        <button onClick={this.decrement}>-{this.state.step}</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter increments/decrements by a custom step value.

Let’s Try →

Inferno Counter with Min/Max

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, min: 0, max: 10, isDark: false };

    increment = () => this.setState({ count: Math.min(this.state.count + 1, this.state.max) });
    decrement = () => this.setState({ count: Math.max(this.state.count - 1, this.state.min) });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter with maximum and minimum limits.

Let’s Try →

Inferno Counter with Auto Increment

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false, auto: false, timer: null };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });
    toggleAuto = () => {
        if (!this.state.auto) {
        const timer = setInterval(this.increment, 1000);
        this.setState({ auto: true, timer });
        } else {
        clearInterval(this.state.timer);
        this.setState({ auto: false, timer: null });
        }
    };

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.toggleAuto}>{this.state.auto ? 'Stop Auto' : 'Start Auto'}</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter that automatically increments every second.

Let’s Try →

Inferno Counter with Double Increment

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    doubleIncrement = () => this.setState({ count: this.state.count + 2 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.doubleIncrement}>++</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Counter increments by 2 with a special button.

Let’s Try →

Inferno Counter with Even/Odd Indicator

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: 0, isDark: false };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count} ({this.state.count % 2 === 0 ? 'Even' : 'Odd'})</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Shows whether the current count is even or odd.

Let’s Try →

Inferno Counter with LocalStorage

import { render, Component } from 'inferno';

class Counter extends Component {
    state = { count: parseInt(localStorage.getItem('count') || 0), isDark: false };

    increment = () => { const count = this.state.count + 1; localStorage.setItem('count', count); this.setState({ count }); };
    decrement = () => { const count = this.state.count - 1; localStorage.setItem('count', count); this.setState({ count }); };
    reset = () => { localStorage.setItem('count', 0); this.setState({ count: 0 }); };
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Toggle Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Persists counter value in localStorage.

Let’s Try →

Inferno Counter with Color Themes

import { render, Component } from 'inferno';

const themes = ['light-theme','dark-theme','blue-theme'];

class Counter extends Component {
    state = { count: 0, current: 0, theme: themes[0] };

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => { const next = (this.state.current + 1) % themes.length; this.setState({ current: next, theme: themes[next] }); };

    render() {
        return (
        <div className={this.state.theme}>
        <h2>Counter: {this.state.count}</h2>
        <div>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.reset}>Reset</button>
        </div>
        <button onClick={this.toggleTheme}>Switch Theme</button>
        </div>
        );
    }
}

render(<Counter />, document.body);

Cycles through multiple color themes.

Let’s Try →

Frequently Asked Questions about Inferno

What is Inferno?

What are the primary use cases for Inferno?

High-performance SPAs. Real-time dashboards and charts. Embedded widgets with small footprint. React-compatible environments needing speed. Apps requiring extremely fast client-side rendering

What are the strengths of Inferno?

One of the fastest UI libraries available. Very small and lightweight. Easy migration from React. Great SSR performance. Stable API with minimal overhead

What are the limitations of Inferno?

Smaller ecosystem than React/Vue. Some advanced React features not supported. Less community activity. Fewer tutorials and third-party libraries. Maintenance pace slower than big frameworks

How can I practice Inferno typing speed?

CodeSpeedTest offers 8+ real Inferno code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.