Learn Preact - 9 Code Examples & CST Typing Practice Test

Preact is a fast, lightweight JavaScript library for building user interfaces with a React-like API. It emphasizes small bundle size, performance, and compatibility with modern web standards while providing an easy transition for React developers.

View all 9 Preact code examples →

Preact Counter Component Preact Counter with Step Increment Preact Counter with Max Limit Preact Counter with Auto-Reset Preact Counter with History Preact Counter with Dark Mode Only Preact Counter with Auto-Increment Preact Counter with Conditional Theme Preact Full Featured Counter

Learn PREACT with Real Code Examples

Updated Nov 22, 2025

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

Code Sample Descriptions

Preact Counter Component

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function Counter() {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    useEffect(() => {
        const savedCount = localStorage.getItem('count');
        if (savedCount) setCount(parseInt(savedCount, 10));
    }, []);

    useEffect(() => {
        localStorage.setItem('count', count.toString());
    }, [count]);

    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
        <button onClick={() => setIsDark(!isDark)}>Switch to {isDark ? 'Light' : 'Dark'} Theme</button>
        </div>
    );
}

export default Counter;

Basic Preact counter with dark/light theme toggle.

Let’s Try →

Preact Counter with Step Increment

import { h } from 'preact';
import { useState } from 'preact/hooks';

function StepCounter() {
    const [count, setCount] = useState(0);
    const step = 2;
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default StepCounter;

Counter increments/decrements by a step value using Preact.

Let’s Try →

Preact Counter with Max Limit

import { h } from 'preact';
import { useState } from 'preact/hooks';

function MaxCounter() {
    const [count, setCount] = useState(0);
    const max = 5;
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => count < max && setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default MaxCounter;

Stops incrementing after a maximum count is reached.

Let’s Try →

Preact Counter with Auto-Reset

import { h } from 'preact';
import { useState } from 'preact/hooks';

function AutoResetCounter() {
    const [count, setCount] = useState(0);
    const threshold = 10;
    const increment = () => setCount(c => (c + 1 > threshold ? 0 : c + 1));
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={increment}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default AutoResetCounter;

Automatically resets when counter exceeds threshold.

Let’s Try →

Preact Counter with History

import { h } from 'preact';
import { useState } from 'preact/hooks';

function HistoryCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const increment = () => { setCount(count + 1); setHistory([...history,'Increment']); };
    const decrement = () => { setCount(count - 1); setHistory([...history,'Decrement']); };
    const reset = () => { setCount(0); setHistory([...history,'Reset']); };
    return (
        <div>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        </div>
    );
}

export default HistoryCounter;

Tracks increment/decrement history.

Let’s Try →

Preact Counter with Dark Mode Only

import { h } from 'preact';
import { useState } from 'preact/hooks';

function DarkModeCounter() {
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

export default DarkModeCounter;

Static counter with only dark/light theme toggle.

Let’s Try →

Preact Counter with Auto-Increment

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function AutoIncrementCounter() {
    const [count, setCount] = useState(0);
    useEffect(() => { const interval = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(interval); }, []);
    return <h2>Counter: {count}</h2>;
}

export default AutoIncrementCounter;

Automatically increments counter every second.

Let’s Try →

Preact Counter with Conditional Theme

import { h } from 'preact';
import { useState } from 'preact/hooks';

function ConditionalThemeCounter() {
    const [count, setCount] = useState(0);
    const isDark = count % 2 === 0;
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default ConditionalThemeCounter;

Theme changes automatically based on even/odd counter value.

Let’s Try →

Preact Full Featured Counter

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function FullCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const [isDark, setIsDark] = useState(false);
    const step = 2, max = 10;
    useEffect(() => { const interval = setInterval(() => { setCount(c => { let n = c + step; if(n > max) n = 0; setHistory(h => [...h,'Auto Increment']); return n; }); },1000); return () => clearInterval(interval); }, []);
    const increment = () => { setCount(c => c + step); setHistory(h => [...h,'Increment']); };
    const decrement = () => { setCount(c => c - step); setHistory(h => [...h,'Decrement']); };
    const reset = () => { setCount(0); setHistory(h => [...h,'Reset']); };
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

export default FullCounter;

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Preact

What is Preact?

What are the primary use cases for Preact?

Small to medium web applications. Mobile-first web apps. Interactive widgets and components. Progressive web apps (PWAs). High-performance client-side rendering

What are the strengths of Preact?

Ultra-small and fast. Easy migration from React. Great for performance-critical apps. Strong ecosystem via preact/compat. Supports modern tooling like Vite and Webpack

What are the limitations of Preact?

Not a full-stack framework. Smaller community than React. Limited built-in routing or state libraries. Some React libraries may need preact/compat. Less official documentation than React

How can I practice Preact typing speed?

CodeSpeedTest offers 9+ real Preact 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

Preact Counter Component

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function Counter() {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    useEffect(() => {
        const savedCount = localStorage.getItem('count');
        if (savedCount) setCount(parseInt(savedCount, 10));
    }, []);

    useEffect(() => {
        localStorage.setItem('count', count.toString());
    }, [count]);

    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
        <button onClick={() => setIsDark(!isDark)}>Switch to {isDark ? 'Light' : 'Dark'} Theme</button>
        </div>
    );
}

export default Counter;

Basic Preact counter with dark/light theme toggle.

Let’s Try →

Preact Counter with Step Increment

import { h } from 'preact';
import { useState } from 'preact/hooks';

function StepCounter() {
    const [count, setCount] = useState(0);
    const step = 2;
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default StepCounter;

Counter increments/decrements by a step value using Preact.

Let’s Try →

Preact Counter with Max Limit

import { h } from 'preact';
import { useState } from 'preact/hooks';

function MaxCounter() {
    const [count, setCount] = useState(0);
    const max = 5;
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => count < max && setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default MaxCounter;

Stops incrementing after a maximum count is reached.

Let’s Try →

Preact Counter with Auto-Reset

import { h } from 'preact';
import { useState } from 'preact/hooks';

function AutoResetCounter() {
    const [count, setCount] = useState(0);
    const threshold = 10;
    const increment = () => setCount(c => (c + 1 > threshold ? 0 : c + 1));
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={increment}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default AutoResetCounter;

Automatically resets when counter exceeds threshold.

Let’s Try →

Preact Counter with History

import { h } from 'preact';
import { useState } from 'preact/hooks';

function HistoryCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const increment = () => { setCount(count + 1); setHistory([...history,'Increment']); };
    const decrement = () => { setCount(count - 1); setHistory([...history,'Decrement']); };
    const reset = () => { setCount(0); setHistory([...history,'Reset']); };
    return (
        <div>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        </div>
    );
}

export default HistoryCounter;

Tracks increment/decrement history.

Let’s Try →

Preact Counter with Dark Mode Only

import { h } from 'preact';
import { useState } from 'preact/hooks';

function DarkModeCounter() {
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

export default DarkModeCounter;

Static counter with only dark/light theme toggle.

Let’s Try →

Preact Counter with Auto-Increment

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function AutoIncrementCounter() {
    const [count, setCount] = useState(0);
    useEffect(() => { const interval = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(interval); }, []);
    return <h2>Counter: {count}</h2>;
}

export default AutoIncrementCounter;

Automatically increments counter every second.

Let’s Try →

Preact Counter with Conditional Theme

import { h } from 'preact';
import { useState } from 'preact/hooks';

function ConditionalThemeCounter() {
    const [count, setCount] = useState(0);
    const isDark = count % 2 === 0;
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

export default ConditionalThemeCounter;

Theme changes automatically based on even/odd counter value.

Let’s Try →

Preact Full Featured Counter

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function FullCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const [isDark, setIsDark] = useState(false);
    const step = 2, max = 10;
    useEffect(() => { const interval = setInterval(() => { setCount(c => { let n = c + step; if(n > max) n = 0; setHistory(h => [...h,'Auto Increment']); return n; }); },1000); return () => clearInterval(interval); }, []);
    const increment = () => { setCount(c => c + step); setHistory(h => [...h,'Increment']); };
    const decrement = () => { setCount(c => c - step); setHistory(h => [...h,'Decrement']); };
    const reset = () => { setCount(0); setHistory(h => [...h,'Reset']); };
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

export default FullCounter;

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Preact

What is Preact?

What are the primary use cases for Preact?

Small to medium web applications. Mobile-first web apps. Interactive widgets and components. Progressive web apps (PWAs). High-performance client-side rendering

What are the strengths of Preact?

Ultra-small and fast. Easy migration from React. Great for performance-critical apps. Strong ecosystem via preact/compat. Supports modern tooling like Vite and Webpack

What are the limitations of Preact?

Not a full-stack framework. Smaller community than React. Limited built-in routing or state libraries. Some React libraries may need preact/compat. Less official documentation than React

How can I practice Preact typing speed?

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