Preact

https://preactjs.com/guide/v10/
Admin
Preact is a fast JavaScript library for building user interfaces with React-like syntax and a much...
Tokens:47,746
Snippets:595
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Preact X

Source: https://preactjs.com/guide/v10/upgrade-guide

Install the latest version of Preact.

```bash
npm install preact
```

--------------------------------

### Install Enzyme and Preact Adapter

Source: https://preactjs.com/guide/v10/unit-testing-with-enzyme

Use npm to install the required Enzyme packages for Preact testing.

```bash
npm install --save-dev enzyme enzyme-adapter-preact-pure
```

--------------------------------

### Install preact-render-to-string

Source: https://preactjs.com/guide/v10/server-side-rendering

Install the required package via npm.

```bash
npm install -S preact-render-to-string
```

--------------------------------

### Install Preact Testing Library

Source: https://preactjs.com/guide/v10/preact-testing-library

Command to add the testing library as a development dependency.

```bash
npm install --save-dev @testing-library/preact
```

--------------------------------

### Start the development server

Source: https://preactjs.com/guide/v10/getting-started

Navigate to the project directory and execute the development script to begin local development.

```bash
# Go into the generated project folder
cd my-preact-app

# Start a development server
npm run dev
```

--------------------------------

### Install Preact Signals

Source: https://preactjs.com/guide/v10/signals

Add the signals package to your project using npm.

```bash
npm install @preact/signals
```

--------------------------------

### Create a signal

Source: https://preactjs.com/guide/v10/signals

Initializes a new signal with a starting value.

```javascript
const count = signal(0);
```

--------------------------------

### Configure Enzyme for Preact

Source: https://preactjs.com/guide/v10/unit-testing-with-enzyme

Initialize Enzyme with the Preact adapter in your test setup file.

```javascript
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-preact-pure';

configure({ adapter: new Adapter() });
```

--------------------------------

### Initialize a Preact project

Source: https://preactjs.com/guide/v10/getting-started

Run this command in your terminal to start the interactive CLI for scaffolding a new Preact application.

```bash
npm init preact
```

--------------------------------

### Example DOM structure for root targeting

Source: https://preactjs.com/guide/v10/preact-root-fragment

An illustration of a parent container containing both scripts and the target application tree.

```html
<body>
	<div id="root"> ⬅ we pass this to render() as the parent DOM element...

		<script src="/etc.js"></script>

		<div class="app"> ⬅ ... but we want to use this tree, not the script
			<!-- ... -->
		</div>
	</div>
</body>
```

--------------------------------

### Test Counter Component

Source: https://preactjs.com/guide/v10/unit-testing-with-enzyme

Example test suite using Enzyme to mount the component and simulate user interactions.

```javascript
import { expect } from 'chai';
import { h } from 'preact';
import { mount } from 'enzyme';

import Counter from '../src/Counter';

describe('Counter', () => {
	it('should display initial count', () => {
		const wrapper = mount(<Counter initialCount={5} />);
		expect(wrapper.text()).to.include('Current value: 5');
	});

	it('should increment after "Increment" button is clicked', () => {
		const wrapper = mount(<Counter initialCount={5} />);

		wrapper.find('button').simulate('click');

		expect(wrapper.text()).to.include('Current value: 6');
	});
});
```

--------------------------------

### Basic Import Map Usage

Source: https://preactjs.com/guide/v10/no-build-workflows

A complete HTML example demonstrating how to define an import map for Preact and HTM, and subsequently import them in a module script.

```html
<!DOCTYPE html>
<html>
	<head>
		<script type="importmap">
			{
				"imports": {
					"preact": "https://esm.sh/preact@10.23.1",
					"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
				}
			}
		</script>
	</head>
	<body>
		<div id="app"></div>

		<script type="module">
			import { render } from 'preact';
			import { html } from 'htm/preact';

			export function App() {
				return html`
					<h1>Hello, World!</h1>
				`;
			}

			render(
				html`<${App} />`,
				document.getElementById('app')
			);
		</script>
	</body>
</html>
```

--------------------------------

### Example of unique keys

Source: https://preactjs.com/guide/v10/debugging

This snippet demonstrates the correct implementation using unique identifiers for keys when mapping over data.

```jsx
const persons = [
	{ name: 'John', age: 22 },
	{ name: 'Sarah', age: 24 }
];

// Somewhere later in your component
<div>
	{persons.map(({ name, age }) => {
		return (
			<p key={name}>
				{name}, Age: {age}
			</p>
		);
	})}
</div>;
```

--------------------------------

### Input Event Handler Logic

Source: https://preactjs.com/guide/v10/forms

Example of an event handler that updates state based on input length.

```javascript
const onInput = e => {
	if (e.currentTarget.value.length <= 3) {
		setValue(e.currentTarget.value);
	}
};
```

--------------------------------

### Create a form with Preact Classes and Hooks

Source: https://preactjs.com/guide/v10/forms

Examples showing how to handle form submissions using the FormData API in both class-based and functional components.

```javascript
class FullNameForm extends Component {
	state = { fullName: '' };

	onSubmit = e => {
		e.preventDefault();
		const formData = new FormData(e.currentTarget);
		this.setState({
			fullName: formData.get('firstName') + ' ' + formData.get('lastName')
		});
		e.currentTarget.reset(); // Clear the inputs to prepare for the next submission
	};

	render(_, { fullName }) {
		return (
			<div class="form-example">
				<form onSubmit={this.onSubmit}>
					<label>
						First Name: <input name="firstName" />
					</label>
					<label>
						Last Name: <input name="lastName" />
					</label>
					<button>Submit</button>
				</form>
				{fullName && <p>Hello {fullName}</p>}
			</div>
		);
	}
}
```

```javascript
function FullNameForm() {
	const [fullName, setFullName] = useState('');

	const onSubmit = e => {
		e.preventDefault();
		const formData = new FormData(e.currentTarget);
		setFullName(formData.get('firstName') + ' ' + formData.get('lastName'));
		e.currentTarget.reset(); // Clear the inputs to prepare for the next submission
	};

	return (
		<div class="form-example">
			<form onSubmit={onSubmit}>
				<label>
					First Name: <input name="firstName" />
				</label>
				<label>
					Last Name: <input name="lastName" />
				</label>
				<button>Submit</button>
			</form>
			{fullName && <p>Hello {fullName}</p>}
		</div>
	);
}
```

--------------------------------

### Test Counter Component

Source: https://preactjs.com/guide/v10/preact-testing-library

Example test suite verifying initial render and state updates using fireEvent and waitFor.

```javascript
import { expect } from 'expect';
import { h } from 'preact';
import { render, fireEvent, screen, waitFor } from '@testing-library/preact';

import Counter from '../src/Counter';

describe('Counter', () => {
	test('should display initial count', () => {
		const { container } = render(<Counter initialCount={5} />);
		expect(container.textContent).toMatch('Current value: 5');
	});

	test('should increment after "Increment" button is clicked', async () => {
		render(<Counter initialCount={5} />);

		fireEvent.click(screen.getByText('Increment'));
		await waitFor(() => {
			// .toBeInTheDocument() is an assertion that comes from jest-dom.
			// Otherwise you could use .toBeDefined().
			expect(screen.getByText('Current value: 6')).toBeInTheDocument();
		});
	});
});
```

--------------------------------

### Example of duplicate keys

Source: https://preactjs.com/guide/v10/debugging

This snippet demonstrates an invalid implementation where multiple children share the same key.

```jsx
// Both children will have the same key "A"
<div>
	{['A', 'A'].map(char => (
		<p key={char}>{char}</p>
	))}
</div>
```

--------------------------------

### Define an asynchronous application component

Source: https://preactjs.com/guide/v10/server-side-rendering

Example of an application structure using Suspense and lazy loading for asynchronous rendering.

```javascript
// app.js
import { Suspense, lazy } from 'preact/compat';

const HomePage = lazy(() => import('./pages/home.js'));

function App() {
	return (
		<Suspense fallback={<p>Loading</p>}>
			<HomePage />
		</Suspense>
	);
}
```

--------------------------------

### Import HTM standalone

Source: https://preactjs.com/guide/v10/getting-started

A convenient single-import version of Preact and HTM for simpler setups.

```javascript
import { html, render } from 'https://esm.sh/htm/preact/standalone'
```

--------------------------------

### Define a custom hook for testing

Source: https://preactjs.com/guide/v10/preact-testing-library

Example of a counter hook extracted for reuse and testing.

```javascript
import { useState, useCallback } from 'preact/hooks';

const useCounter = () => {
	const [count, setCount] = useState(0);
	const increment = useCallback(() => setCount(c => c + 1), []);
	return { count, increment };
};
```

--------------------------------

### Get Owner Stack

Source: https://preactjs.com/guide/v10/api-reference

Captures and returns the component stack trace associated with a specific VNode.

```javascript
import { render, options } from 'preact';
import { getOwnerStack } from 'preact/debug';

const oldVNode = options.diffed;
options.diffed = (vnode) => {
	if (vnode.type === 'h1') {
		console.log(getOwnerStack(vnode));
		// Logs:
		//
		// in h1 (at /path/to/file.jsx:17)
		// in MyComponent (at /path/to/file.jsx:20)
	}
	if (oldVNode) oldVNode(vnode);
};

function MyComponent() {
	return <h1>Hello World!</h1>;
}

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

--------------------------------

### Set up a Provider

Source: https://preactjs.com/guide/v10/context

Wrap components with a Provider to pass a specific value down the tree.

```javascript
import { createContext } from 'preact';

export const Theme = createContext('light');

function App() {
	return (
		<Theme.Provider value="dark">
			<SomeComponent />
		</Theme.Provider>
	);
}
```

--------------------------------

### Get Current VNode

Source: https://preactjs.com/guide/v10/api-reference

Retrieves the VNode currently being processed during the render cycle.

```javascript
import { render } from 'preact';
import { getCurrentVNode } from 'preact/debug';

function MyComponent() {
	const currentVNode = getCurrentVNode();
	console.log(currentVNode); // Logs: Object { type: MyComponent(), props: {}, key: undefined, ref: undefined, ... }

	return <h1>Hello World!</h1>
}

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

--------------------------------

### Generate a production build

Source: https://preactjs.com/guide/v10/getting-started

Run the build command to create an optimized production version of the application in the dist/ folder.

```bash
npm run build
```

--------------------------------

### Create a basic reactive model

Source: https://preactjs.com/guide/v10/signals

Demonstrates defining a model with signals, computed values, and methods for state manipulation.

```javascript
import { signal, computed, createModel } from '@preact/signals';

const CounterModel = createModel((initialCount = 0) => {
	const count = signal(initialCount);
	const doubled = computed(() => count.value * 2);

	return {
		count,
		doubled,
		increment() {
			count.value++;
		},
		decrement() {
			count.value--;
		}
	};
});

const counter = new CounterModel(5);
counter.increment();
console.log(counter.count.value); // 6
```

--------------------------------

### Manage state with useState

Source: https://preactjs.com/guide/v10/hooks

Shows how to initialize state and use the setter function, including passing a callback to the setter.

```javascript
import { useState } from 'preact/hooks';

const Counter = () => {
	const [count, setCount] = useState(0);
	const increment = () => setCount(count + 1);
	// You can also pass a callback to the setter
	const decrement = () => setCount(currentCount => currentCount - 1);

	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={increment}>Increment</button>
			<button onClick={decrement}>Decrement</button>
		</div>
	);
};
```

--------------------------------

### Get Display Name

Source: https://preactjs.com/guide/v10/api-reference

Returns a string representation of a VNode's type for debugging purposes.

```javascript
import { h } from 'preact';
import { getDisplayName } from 'preact/debug';

getDisplayName(h('div')); // "div"
getDisplayName(h(MyComponent)); // "MyComponent"
getDisplayName(h(() => <div />)); // "<empty string>"
```

--------------------------------

### Initialize Preact without build tools

Source: https://preactjs.com/guide/v10/getting-started

Use this approach to load Preact directly in the browser via ESM imports without requiring a build step.

```html
<script type="module">
	import { h, render } from 'https://esm.sh/preact';

	// Create your app
	const app = h('h1', null, 'Hello World!');

	render(app, document.body);
</script>
```

--------------------------------

### Initialize Todo State

Source: https://preactjs.com/guide/v10/signals

Create a signal to hold the initial list of todo items.

```javascript
import { signal } from '@preact/signals';

const todos = signal([{ text: 'Buy groceries' }, { text: 'Walk the dog' }]);
```

--------------------------------

### Triggering a custom element type error

Source: https://preactjs.com/guide/v10/typescript

Example of a TypeScript error when using a custom element not defined in IntrinsicElements.

```typescript
function MyComponent() {
	return <loading-bar showing={true}></loading-bar>;
	//      ~~~~~~~~~~~
	//   💥 Error! Property 'loading-bar' does not exist on type 'JSX.IntrinsicElements'.
}
```

--------------------------------

### Build Todo UI

Source: https://preactjs.com/guide/v10/signals

Connect the signals to a Preact component for user interaction.

```jsx
function TodoList() {
	const onInput = event => (text.value = event.currentTarget.value);

	return (
		<>
			<input value={text.value} onInput={onInput} />
			<button onClick={addTodo}>Add</button>
			<ul>
				{todos.value.map(todo => (
					<li>
						{todo.text} <button onClick={() => removeTodo(todo)}>❌</button>
					</li>
				))}
			</ul>
		</>
	);
}
```

--------------------------------

### Initialize a model with useModel

Source: https://preactjs.com/guide/v10/signals

Creates and manages a model instance across component re-renders, ensuring automatic disposal on unmount.

```javascript
import { signal, createModel } from '@preact/signals';
import { useModel } from '@preact/signals';

const CounterModel = createModel(() => ({
	count: signal(0),
	increment() {
		this.count.value++;
	}
}));

function Counter() {
	const model = useModel(CounterModel);

	return (
		<button onClick={() => model.increment()}>
			Count: {model.count}
		</button>
	);
}
```

--------------------------------

### Setting an Option Hook

Source: https://preactjs.com/guide/v10/options

Demonstrates how to intercept the vnode creation process while preserving existing hooks to ensure compatibility with other addons.

```javascript
import { options } from 'preact';

// Store previous hook
const oldHook = options.vnode;

// Set our own options hook
options.vnode = vnode => {
	console.log("Hey I'm a vnode", vnode);

	// Call previously defined hook if there was any
	if (oldHook) {
		oldHook(vnode);
	}
};
```

--------------------------------

### Define Routes with Router

Source: https://preactjs.com/guide/v10/preact-iso

Demonstrates how to use LocationProvider and Router to define application routes using both direct component path props and the Route component.

```javascript
import { LocationProvider, Router, Route } from 'preact-iso';

function App() {
	return (
		<LocationProvider>
			<Router>
				{/* Both of these are equivalent */}
				<Home path="/" />
				<Route path="/" component={Home} />

				<Profiles path="/profiles" />
				<Profile path="/profile/:id" />
				<NotFound default />
			</Router>
		</LocationProvider>
	);
}
```

--------------------------------

### Create custom render with Context Providers

Source: https://preactjs.com/guide/v10/preact-testing-library

Wrap the default render function to include global providers like Routers or Themes for consistent test environments.

```javascript
// helpers.js
import { render as originalRender } from '@testing-library/preact';
import { createMemoryHistory } from 'history';
import { FooContext } from './foo';

const history = createMemoryHistory();

export function render(vnode) {
	return originalRender(
		<FooContext.Provider value="foo">
			<Router history={history}>{vnode}</Router>
		</FooContext.Provider>
	);
}

// Usage like usual. Look ma, no providers!
render(<MyComponent />);
```

--------------------------------

### Triggering a custom attribute type error

Source: https://preactjs.com/guide/v10/typescript

Example of a TypeScript error when adding an undefined custom attribute to an HTML element.

```typescript
function MyComponent() {
	return <div custom="foo"></div>;
	//          ~~~~~~
	//       💥 Error! Type '{ custom: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
	//                   Property 'custom' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
}
```

--------------------------------

### Manage state with createContext

Source: https://preactjs.com/guide/v10/whats-new

Use the Provider and Consumer pattern to pass data through the component tree without manual prop drilling.

```javascript
const Theme = createContext('light');

function ThemedButton(props) {
	return (
		<Theme.Consumer>{theme => <div>Active theme: {theme}</div>}</Theme.Consumer>
	);
}

function App() {
	return (
		<Theme.Provider value="dark">
			<SomeComponent>
				<ThemedButton />
			</SomeComponent>
		</Theme.Provider>
	);
}
```

--------------------------------

### Configure Router with Lifecycle Callbacks

Source: https://preactjs.com/guide/v10/preact-iso

Implement the Router component to define routes and handle navigation events using lifecycle callbacks.

```javascript
import { LocationProvider, Router } from 'preact-iso';

function App() {
	return (
		<LocationProvider>
			<Router
				onRouteChange={url => console.log('Route changed to', url)}
				onLoadStart={url => console.log('Starting to load', url)}
				onLoadEnd={url => console.log('Finished loading', url)}
			>
				<Home path="/" />
				<Profiles path="/profiles" />
				<Profile path="/profile/:id" />
			</Router>
		</LocationProvider>
	);
}
```

--------------------------------

### Component

Source: https://preactjs.com/guide/v10/api-reference

The base class for creating stateful Preact components.

```APIDOC
## Component

### Description
Base class for creating stateful Preact components. Components are managed by the renderer and should not be instantiated directly.

### Method
render(props, state)

### Parameters
- **props** (object) - Required - The current properties of the component.
- **state** (object) - Required - The current state of the component.

### Description
All components must provide a `render()` function that returns a Virtual DOM Element, an Array, or `null`.
```

--------------------------------

### Initialize a model with constructor arguments

Source: https://preactjs.com/guide/v10/signals

Uses a factory function within useModel to pass arguments to a model constructor.

```javascript
const CounterModel = createModel((initialCount) => ({
	count: signal(initialCount),
	increment() {
		this.count.value++;
	}
}));

function Counter({ initialValue }) {
	// Use a factory function to pass arguments
	const model = useModel(() => new CounterModel(initialValue));

	return (
		<button onClick={() => model.increment()}>
			Count: {model.count}
		</button>
	);
}
```

--------------------------------

### action(fn)

Source: https://preactjs.com/guide/v10/signals

Wraps a function to execute in a batched and untracked context.

```APIDOC
## action(fn)

### Description
Wraps a function to run in a batched and untracked context, useful for standalone actions.

### Parameters
- **fn** (function) - Required - The function to wrap.
```

--------------------------------

### Verify Todo Logic

Source: https://preactjs.com/guide/v10/signals

Simulate adding a todo item to verify the state management logic.

```javascript
import { signal } from '@preact/signals';

const todos = signal([{ text: 'Buy groceries' }, { text: 'Walk the dog' }]);

const text = signal('');

function addTodo() {
	todos.value = [...todos.value, { text: text.value }];
	text.value = ''; // Reset input value on add
}

// Check if our logic works
console.log(todos.value);
// Logs: [{text: "Buy groceries"}, {text: "Walk the dog"}]

// Simulate adding a new todo
text.value = 'Tidy up';
addTodo();

// Check that it added the new item and cleared the `text` signal:
console.log(todos.value);
// Logs: [{text: "Buy groceries"}, {text: "Walk the dog"}, {text: "Tidy up"}]

console.log(text.value); // Logs: ""
```

--------------------------------

### Prerender components with prerender()

Source: https://preactjs.com/guide/v10/preact-iso

Generate static HTML from a component tree. Returns an object containing the HTML string and discovered links.

```javascript
import {
	LocationProvider,
	ErrorBoundary,
	Router,
	lazy,
	prerender
} from 'preact-iso';

// Asynchronous (throws a promise)
const Foo = lazy(() => import('./foo.js'));
const Bar = lazy(() => import('./bar.js'));

function App() {
	return (
		<LocationProvider>
			<ErrorBoundary>
				<Router>
					<Foo path="/" />
					<Bar path="/bar" />
				</Router>
			</ErrorBoundary>
		</LocationProvider>
	);
}

const { html, links } = await prerender(<App />);
```

--------------------------------

### Create Context

Source: https://preactjs.com/guide/v10/context

Initialize new context objects using the createContext function with an optional default value.

```javascript
import { createContext } from 'preact';

export const Theme = createContext('light');
export const User = createContext({ name: 'Guest' });
export const Locale = createContext(null);
```

--------------------------------

### Enable Pretty Printing

Source: https://preactjs.com/guide/v10/server-side-rendering

Pass the pretty option to preserve whitespace and indent the rendered output for better readability.

```javascript
import renderToString from 'preact-render-to-string/jsx';

const Foo = () => <div>foo</div>;
const App = (
	<div class="foo">
		<Foo />
	</div>
);

const html = renderToString(App, {}, { pretty: true });
console.log(html);
// <div class="foo">
//   <div>foo</div>
// </div>
```

--------------------------------

### Using createRootFragment for partial hydration

Source: https://preactjs.com/guide/v10/preact-root-fragment

Replacing the deprecated replaceNode approach with createRootFragment to manage independent Virtual DOM trees.

```javascript
import { createRootFragment } from 'preact-root-fragment';

render(<A />, createRootFragment(sidebar, widgetA));
render(<B />, createRootFragment(sidebar, widgetB));
render(<C />, createRootFragment(sidebar, widgetC));
```

--------------------------------

### Initialize Preact Debugging

Source: https://preactjs.com/guide/v10/debugging

Import preact/debug as the very first import in the application entry file to initialize devtools connection.

```javascript
// Must be the first import
import 'preact/debug';
import { render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));
```

--------------------------------

### Implement Routing with preact-iso

Source: https://preactjs.com/guide/v10/preact-iso

Use the Router component with LocationProvider and ErrorBoundary to handle synchronous and asynchronous routes.

```javascript
import {
	lazy,
	LocationProvider,
	ErrorBoundary,
	Router,
	Route
} from 'preact-iso';

// Synchronous
import Home from './routes/home.js';

// Asynchronous (throws a promise)
const Profiles = lazy(() => import('./routes/profiles.js'));
const Profile = lazy(() => import('./routes/profile.js'));
const NotFound = lazy(() => import('./routes/_404.js'));

function App() {
	return (
		<LocationProvider>
			<ErrorBoundary>
				<Router>
					<Home path="/" />
					{/* Alternative dedicated route component for better TS support */}
					<Route path="/profiles" component={Profiles} />
					<Route path="/profile/:id" component={Profile} />
					{/* `default` prop indicates a fallback route. Useful for 404 pages */}
					<NotFound default />
				</Router>
			</ErrorBoundary>
		</LocationProvider>
	);
}
```

--------------------------------

### <Show />

Source: https://preactjs.com/guide/v10/signals

A declarative component for conditionally rendering content based on a signal's value.

```APIDOC
## <Show />

### Description
Provides a declarative way to conditionally render content based on a signal's value.

### Parameters
- **when** (Signal) - Required - The signal to evaluate.
- **fallback** (Node) - Optional - Content to render when the signal value is falsy.
```

--------------------------------

### Share logic with Hooks

Source: https://preactjs.com/guide/v10/whats-new

Utilize functional components with state and lifecycle logic by importing from preact/hooks.

```javascript
function Counter() {
	const [value, setValue] = useState(0);
	const increment = useCallback(() => setValue(value + 1), [value]);

	return (
		<div>
			Counter: {value}
			<button onClick={increment}>Increment</button>
		</div>
	);
}
```

--------------------------------

### <For />

Source: https://preactjs.com/guide/v10/signals

A component for rendering lists from signal arrays with automatic caching.

```APIDOC
## <For />

### Description
Helps you render lists from signal arrays with automatic caching of rendered items.

### Parameters
- **each** (Signal<Array>) - Required - The signal containing the array to iterate over.
- **fallback** (Node) - Optional - Content to render if the array is empty.
```

--------------------------------

### useSyncExternalStore

Source: https://preactjs.com/guide/v10/hooks

Allows you to subscribe to an external data source, such as a global state management library, browser APIs, or any other external data source.

```APIDOC
## useSyncExternalStore

### Description
Allows you to subscribe to an external data source, such as a global state management library, browser APIs, or any other external (to Preact) data source.

### Usage
```javascript
import { useSyncExternalStore } from 'preact/compat';

function subscribe(cb) {
	addEventListener('scroll', cb);
	return () => removeEventListener('scroll', cb);
}

function App() {
	const scrollY = useSyncExternalStore(subscribe, () => window.scrollY);
}
```
```

--------------------------------

### Creating Refs in Components

Source: https://preactjs.com/guide/v10/refs

Initialize refs using createRef for class components or useRef for function components.

```javascript
import { createRef } from 'preact';

class MyComponent extends Component {
	countRef = createRef();
	inputRef = createRef(null);

	// ...
}
```

```javascript
import { useRef } from 'preact/hooks';

function MyComponent() {
	const countRef = useRef();
	const inputRef = useRef(null);

	// ...
}
```

--------------------------------

### Importing Preact modules

Source: https://preactjs.com/guide/v10/upgrade-guide

Use named exports instead of a default export to enable better tree-shaking.

```javascript
// Preact 8.x
import Preact from 'preact';

// Preact X
import * as preact from 'preact';

// Preferred: Named exports (works in 8.x and Preact X)
import { h, Component } from 'preact';
```

--------------------------------

### Render as JSX

Source: https://preactjs.com/guide/v10/server-side-rendering

Use the jsx option to render output as JSX, which is useful for snapshot testing.

```javascript
import renderToString from 'preact-render-to-string/jsx';

const App = <div data-foo={true} />;

const html = renderToString(App, {}, { jsx: true });
console.log(html);
// <div data-foo={true} />
```

--------------------------------

### Import Map for Preact with Hooks, Signals, and HTM

Source: https://preactjs.com/guide/v10/no-build-workflows

Configures an import map to include Preact, Signals, and HTM, ensuring proper externalization to maintain a single Preact instance.

```json
<script type="importmap">
	{
		"imports": {
			"preact": "https://esm.sh/preact@10.23.1",
			"preact/": "https://esm.sh/preact@10.23.1/",
			"@preact/signals": "https://esm.sh/@preact/signals@1.3.0?external=preact",
			"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
		}
	}
</script>
```

--------------------------------

### Create context with createContext

Source: https://preactjs.com/guide/v10/api-reference

Initializes a Context object for passing data through the component tree without explicit prop drilling.

```javascript
import { createContext } from 'preact';

const MyContext = createContext(defaultValue);
```

--------------------------------

### Correct Component Rendering

Source: https://preactjs.com/guide/v10/api-reference

Use JSX or h() to pass components to render() to ensure they are treated as VNodes.

```javascript
const App = () => <div>foo</div>;

// DON'T: Invoking components directly means they won't be counted as a
// VNode and hence not be able to use functionality relating to vnodes.
render(App(), rootElement); // ERROR
render(App, rootElement); // ERROR

// DO: Passing components using h() or JSX allows Preact to render correctly:
render(h(App), rootElement); // success
render(<App />, rootElement); // success
```

--------------------------------

### Creating Virtual DOM Elements with h()

Source: https://preactjs.com/guide/v10/api-reference

Create lightweight descriptions of UI nodes using the h() function.

```javascript
import { h } from 'preact';

h('div', { id: 'foo' }, 'Hello!');
// <div id="foo">Hello!</div>

h('div', { id: 'foo' }, 'Hello', null, ['Preact!']);
// <div id="foo">Hello Preact!</div>

h('div', { id: 'foo' }, h('span', null, 'Hello!'));
// <div id="foo"><span>Hello!</span></div>
```

--------------------------------

### Create a model

Source: https://preactjs.com/guide/v10/signals

Defines a model constructor using a factory function to encapsulate signals and actions.

```javascript
import { signal, computed, effect, createModel } from '@preact/signals';

const CounterModel = createModel((initialCount = 0) => {
	const count = signal(initialCount);
	const doubled = computed(() => count.value * 2);

	effect(() => {
		console.log('Count changed:', count.value);
	});

	return {
		count,
		doubled,
		increment() {
			count.value++;
		},
		decrement() {
			count.value--;
		}
	};
});

// Create a new model instance using `new`
const counter = new CounterModel(5);
counter.increment(); // Updates are automatically batched
console.log(counter.count.value); // 6
console.log(counter.doubled.value); // 12

// Clean up all effects when done
counter[Symbol.dispose]();
```

--------------------------------

### lazy

Source: https://preactjs.com/guide/v10/api-reference

Defers loading of a component until it is needed.

```APIDOC
## lazy

### Description
Allows deferring the loading of a component until it is actually needed, useful for code-splitting.

### Usage
```javascript
import { lazy } from 'preact/compat';

const MyLazyComponent = lazy(() => import('./MyLazyComponent.jsx'));
```
```

--------------------------------

### createModel(factory)

Source: https://preactjs.com/guide/v10/signals

Creates a model constructor that encapsulates signals, computed values, and actions.

```APIDOC
## createModel(factory)

### Description
Creates a model constructor from a factory function. The factory should return an object containing signals, computed values, and methods.

### Parameters
- **factory** (function) - Required - A function that returns the model structure.
```

--------------------------------

### Testing component updates with act and update

Source: https://preactjs.com/guide/v10/unit-testing-with-enzyme

Demonstrates manually invoking an onClick handler, wrapping the execution in act, and calling wrapper.update() to refresh the Enzyme view.

```javascript
it('should increment after "Increment" button is clicked', () => {
	const wrapper = mount(<Counter initialCount={5} />);
	const onClick = wrapper.find('button').props().onClick;

	act(() => {
		// Invoke the button's click handler, but this time directly, instead of
		// via an Enzyme API
		onClick();
	});
	// Refresh Enzyme's view of the output
	wrapper.update();

	expect(wrapper.text()).to.include('Current value: 6');
});
```

--------------------------------

### useTransition

Source: https://preactjs.com/guide/v10/hooks

Stubbed-out implementation for transitions, as Preact does not support concurrent rendering.

```APIDOC
## useTransition

### Description
Stubbed-out implementation as Preact does not support concurrent rendering. The `isPending` value will always be `false`.

### Usage
```javascript
import { useTransition } from 'preact/compat';

function App() {
	const [isPending, startTransition] = useTransition();

	const handleClick = () => {
		startTransition(() => {
			// Transition code here
		});
	};
}
```
```

--------------------------------

### Enzyme Rendering Modes

Source: https://preactjs.com/guide/v10/unit-testing-with-enzyme

Demonstrates the three primary rendering functions provided by Enzyme for component testing.

```javascript
import { mount, shallow, render } from 'enzyme';

// Render the full component tree:
const wrapper = mount(<MyComponent prop="value" />);

// Render only `MyComponent`'s direct output (ie. "mock" child components
// to render only as placeholders):
const wrapper = shallow(<MyComponent prop="value" />);

// Render the full component tree to an HTML string, and parse the result:
const wrapper = render(<MyComponent prop="value" />);
```

--------------------------------

### options.vnode

Source: https://preactjs.com/guide/v10/options

Invoked whenever a VNode object is created.

```APIDOC
## options.vnode

### Signature
`(vnode: VNode) => void`

### Description
Invoked whenever a VNode object is created. VNodes are Preact's representation of Virtual DOM elements.
```

--------------------------------

### Rendering with multiple root elements

Source: https://preactjs.com/guide/v10/preact-root-fragment

Demonstrates using an array of children as root elements for a component that produces multiple roots.

```javascript
import { createRootFragment } from 'preact-root-fragment';
import { render } from 'preact';

function App() {
  return (
    <>
      <h1>Example</h1>
      <p>Hello world!</p>
    </>
  );
}

// Use only the last two child elements within <body>:
const children = [].slice.call(document.body.children, -2);

render(<App />, createRootFragment(document.body, children));
```

--------------------------------

### h() / createElement()

Source: https://preactjs.com/guide/v10/api-reference

Creates a Virtual DOM Element.

```APIDOC
## h(type, props, ...children)

### Description
Returns a Virtual DOM Element with the given `props` and `children`.

### Parameters
- **type** (string|Component) - Required - The type of the element.
- **props** (object) - Required - The properties of the element.
- **children** (any) - Optional - Nested elements or scalar values.
```

--------------------------------

### useRoute()

Source: https://preactjs.com/guide/v10/preact-iso

A hook to access route-specific information within a Router.

```APIDOC
## useRoute()

### Description
Provides access to current route information, specifically useful for extracting route parameters defined in the path.

### Returns
- **path** (string) - The current path.
- **query** (Record<string, string>) - The parsed query string parameters.
- **params** (Record<string, string>) - The route parameters extracted from the path (e.g., :id).
```

--------------------------------

### Wrap App with LocationProvider

Source: https://preactjs.com/guide/v10/preact-iso

Use LocationProvider to provide routing context to the application, optionally setting a scope for path interception.

```javascript
import { LocationProvider } from 'preact-iso';

function App() {
	return (
		<LocationProvider scope="/app">{/* Your app here */}</LocationProvider>
	);
}
```

--------------------------------

### Stream rendering with renderToPipeableStream

Source: https://preactjs.com/guide/v10/server-side-rendering

Utilizes Node.js Streams to render the application. Requires handling shell readiness and error states within the request handler.

```javascript
import { renderToPipeableStream } from 'preact-render-to-string/stream-node';

// Request handler syntax and form will vary across frameworks
function handler(req, res) {
	const { pipe, abort } = renderToPipeableStream(<App />, {
		onShellReady() {
			res.statusCode = 200;
			res.setHeader('Content-Type', 'text/html');
			pipe(res);
		},
		onError(error) {
			res.statusCode = 500;
			res.send(
				`<!doctype html><p>An error ocurred:</p><pre>${error.message}</pre>`
			);
		}
	});

	// Abandon and switch to client rendering if enough time passes.
	setTimeout(abort, 2000);
}
```

--------------------------------

### Implementing the render method

Source: https://preactjs.com/guide/v10/api-reference

Provide a render function that returns a Virtual DOM element based on props and state.

```javascript
import { Component } from 'preact';

class MyComponent extends Component {
	render(props, state) {
		// props is the same as this.props
		// state is the same as this.state

		return <h1>Hello, {props.name}!</h1>;
	}
}
```

--------------------------------

### Remove preact-compat

Source: https://preactjs.com/guide/v10/upgrade-guide

Remove the legacy preact-compat package as it is now integrated into the core.

```bash
npm remove preact-compat
```

--------------------------------

### Compare text node structure between Preact 8.x and Preact X

Source: https://preactjs.com/guide/v10/upgrade-guide

Demonstrates the difference in how adjacent text nodes are rendered in the VNode tree between versions.

```javascript
// Preact 8.x
console.log(<div>foo{'bar'}</div>);
// Logs a structure like this:
//   div
//     text

// Preact X
console.log(<div>foo{'bar'}</div>);
// Logs a structure like this:
//   div
//     text
//     text
```

--------------------------------

### Enable Preact Debugging

Source: https://preactjs.com/guide/v10/differences-to-react

Import the debug module at the top of the main entry file to enable warnings and developer tool integration.

```javascript
import 'preact/debug'; // <-- Add this line at the top of your main entry file
```

--------------------------------

### Class Component Render Arguments

Source: https://preactjs.com/guide/v10/differences-to-react

Compare standard class component rendering with Preact's shorthand render arguments.

```javascript
// Works in both Preact and React
class Foo extends Component {
	state = { age: 1 };

	render() {
		return (
			<div>
				Name: {this.props.name}, Age: {this.state.age}
			</div>
		);
	}
}
```

```javascript
// Only works in Preact
class Foo extends Component {
	state = { age: 1 };

	render({ name }, { age }) {
		return (
			<div>
				Name: {name}, Age: {age}
			</div>
		);
	}
}
```

--------------------------------

### Implementation of useSignal hook

Source: https://preactjs.com/guide/v10/signals

Internal implementation detail showing how useSignal wraps a signal in useMemo.

```javascript
function useSignal(value) {
	return useMemo(() => signal(value), []);
}
```

--------------------------------

### Fragment Shorthand Syntax

Source: https://preactjs.com/guide/v10/components

Comparison between the explicit Fragment component and the shorthand <> syntax.

```javascript
// This:
const Foo = <Fragment>foo</Fragment>;
// ...is the same as this:
const Bar = <>foo</>;
```

--------------------------------

### Suspense

Source: https://preactjs.com/guide/v10/api-reference

A component to handle asynchronous rendering states.

```APIDOC
## Suspense

### Description
A component used to wait for asynchronous operations to complete before rendering children. It renders the `fallback` content while waiting.

### Usage
```javascript
import { Suspense } from 'preact/compat';

<Suspense fallback={<div>Loading...</div>}>
    <MyLazyComponent />
</Suspense>
```
```

--------------------------------

### signal(initialValue)

Source: https://preactjs.com/guide/v10/signals

Creates a new signal with an initial value. The returned object has a .value property for reading/writing and a .peek() method for reading without subscribing.

```APIDOC
## signal(initialValue)

### Description
Creates a new signal with the given argument as its initial value. The returned signal provides a `.value` property for reactive access and a `.peek()` method for non-reactive access.

### Parameters
- **initialValue** (any) - Required - The initial value of the signal.
```

--------------------------------

### prerender(jsx)

Source: https://preactjs.com/guide/v10/preact-iso

Renders a Virtual DOM tree to an HTML string. Returns a Promise that resolves to an object containing the rendered HTML and a list of discovered links.

```APIDOC
## prerender(jsx)

### Description
Renders a Virtual DOM tree to an HTML string. Returns a Promise that resolves to an object containing the rendered HTML and a list of discovered links.

### Parameters
- **jsx** (ComponentChild) - Required - The JSX element or component to render.

### Response
- **html** (string) - The pre-rendered static HTML markup.
- **links** (Array) - An array of non-external URL strings found in links on the generated page.
```

--------------------------------

### Import compatibility layer

Source: https://preactjs.com/guide/v10/whats-new

Update imports to use the new preact/compat package integrated into the core.

```javascript
// Preact 8.x
import React from 'preact-compat';

// Preact X
import React from 'preact/compat';
```

--------------------------------

### Synchronize signals with useLiveSignal

Source: https://preactjs.com/guide/v10/signals

Creates a local signal that stays synchronized with an external signal.

```javascript
import { signal } from '@preact/signals';
import { useLiveSignal } from '@preact/signals/utils';

const external = signal(0);

function Component() {
	const local = useLiveSignal(external);
	// local will automatically update when external changes
}
```

--------------------------------

### createPortal

Source: https://preactjs.com/guide/v10/api-reference

Renders a virtual DOM node into a different container in the DOM tree.

```APIDOC
## createPortal(virtualDom, containerNode)

### Description
Allows you to render somewhere else in the DOM tree than your component's natural parent.

### Parameters
- **virtualDom** (VNode) - Required - The virtual DOM to render.
- **containerNode** (Element) - Required - The DOM element to render into.
```

--------------------------------

### Compose nested models

Source: https://preactjs.com/guide/v10/signals

Shows how to nest models where the parent manages the lifecycle and cleanup of child models.

```javascript
const TodoItemModel = createModel((text) => {
	const completed = signal(false);

	return {
		text,
		completed,
		toggle() {
			completed.value = !completed.value;
		}
	};
});

const TodoListModel = createModel(() => {
	const items = signal([]);

	return {
		items,
		addTodo(text) {
			const todo = new TodoItemModel(text);
			items.value = [...items.value, todo];
		},
		removeTodo(todo) {
			items.value = items.value.filter(t => t !== todo);
			todo[Symbol.dispose]();
		}
	};
});

const todoList = new TodoListModel();
todoList.addTodo('Buy groceries');
todoList.addTodo('Walk the dog');

// Disposing the parent also cleans up all nested model effects
todoList[Symbol.dispose]();
```

--------------------------------

### Manage transitions with useTransition

Source: https://preactjs.com/guide/v10/hooks

A stubbed-out implementation where isPending is always false and callbacks execute immediately.

```javascript
import { useTransition } from 'preact/compat';

function App() {
	// `isPending` will always be `false`
	const [isPending, startTransition] = useTransition();

	const handleClick = () => {
		// Immediately executes the callback, it's a no-op.
		startTransition(() => {
			// Transition code here
		});
	};
}
```

--------------------------------

### options.unmount

Source: https://preactjs.com/guide/v10/options

Invoked immediately before a vnode is unmounted.

```APIDOC
## options.unmount

### Signature
`(vnode: VNode) => void`

### Description
Invoked immediately before a vnode is unmounted, when its DOM representation is still attached.
```

--------------------------------

### Alias React to Preact in Node

Source: https://preactjs.com/guide/v10/getting-started

Use package.json dependencies to alias React to Preact for Node-based environments.

```json
{
	"dependencies": {
		"react": "npm:@preact/compat",
		"react-dom": "npm:@preact/compat"
	}
}
```

--------------------------------

### options.event

Source: https://preactjs.com/guide/v10/options

Invoked just before a DOM event is handled.

```APIDOC
## options.event

### Signature
`(event: Event) => any`

### Description
Invoked just before a DOM event is handled by its associated Virtual DOM listener. The return value replaces the event passed to the listener.
```

--------------------------------

### Render to string synchronously

Source: https://preactjs.com/guide/v10/server-side-rendering

Transforms a Preact tree into an HTML string synchronously.

```javascript
import { renderToString } from 'preact-render-to-string';

const name = 'Preact User!';
const App = <div class="foo">Hello {name}</div>;

const html = renderToString(App);
console.log(html);
// <div class="foo">Hello Preact User!</div>
```

--------------------------------

### Implement select dropdown

Source: https://preactjs.com/guide/v10/forms

Captures selection changes from a dropdown menu and updates the component state.

```javascript
class MySelect extends Component {
	state = { value: '' };

	onChange = e => {
		this.setState({ value: e.currentTarget.value });
	};

	render(_, { value }) {
		return (
			<div class="form-example">
				<select onChange={this.onChange}>
					<option value="A">A</option>
					<option value="B">B</option>
					<option value="C">C</option>
				</select>
				<p>You selected: {value}</p>
			</div>
		);
	}
}
```

```javascript
function MySelect() {
	const [value, setValue] = useState('');

	return (
		<div class="form-example">
			<select onChange={e => setValue(e.currentTarget.value)}>
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select>
			<p>You selected: {value}</p>
		</form>
	);
}
```

--------------------------------

### Create application state function

Source: https://preactjs.com/guide/v10/signals

Encapsulate signals and computed properties within a factory function to improve testability and architecture.

```javascript
function createAppState() {
	const todos = signal([]);

	const completed = computed(() => {
		return todos.value.filter(todo => todo.completed).length;
	});

	return { todos, completed };
}
```

--------------------------------

### Manage complex state with useReducer

Source: https://preactjs.com/guide/v10/hooks

Demonstrates using useReducer for complex state logic with a reducer function and dispatch.

```javascript
import { useReducer } from 'preact/hooks';

const initialState = 0;
const reducer = (state, action) => {
	switch (action) {
		case 'increment':
			return state + 1;
		case 'decrement':
			return state - 1;
		case 'reset':
			return 0;
		default:
			throw new Error('Unexpected action');
	}
};

function Counter() {
	// Returns the current state and a dispatch function to
	// trigger an action
	const [count, dispatch] = useReducer(reducer, initialState);
	return (
		<div>
			{count}
			<button onClick={() => dispatch('increment')}>+1</button>
			<button onClick={() => dispatch('decrement')}>-1</button>
			<button onClick={() => dispatch('reset')}>reset</button>
		</div>
	);
}
```

--------------------------------

### Alias React to Preact with Import Maps

Source: https://preactjs.com/guide/v10/getting-started

Use an import map in the browser to resolve React imports to Preact.

```html
<script type="importmap">
	{
		"imports": {
			"preact": "https://esm.sh/preact@10.23.1",
			"preact/": "https://esm.sh/preact@10.23.1/",
			"react": "https://esm.sh/preact@10.23.1/compat",
			"react/": "https://esm.sh/preact@10.23.1/compat/",
			"react-dom": "https://esm.sh/preact@10.23.1/compat"
		}
	}
</script>
```

--------------------------------

### Render behavior in Preact 8.x

Source: https://preactjs.com/guide/v10/upgrade-guide

Demonstrates how render appended elements in Preact 8.x without diffing.

```javascript
// Existing markup:
<body>
	<div>hello</div>
</body>;

render(<p>foo</p>, document.body);
render(<p>bar</p>, document.body);

// Preact 8.x output:
<body>
	<div>hello</div>
	<p>foo</p>
	<p>bar</p>
</body>;
```
Tokens:
Raw