Guide · Open source

How to use Preact: install, render components and hooks

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Preact is a JavaScript library for building user interfaces from reusable components. Its API closely follows React, and the project describes it as a fast 4kB alternative with the same modern API. This guide walks through installing Preact with npm, rendering your first tree of elements, writing a component that holds state with hooks, and deciding whether it fits your project. It assumes you already know basic JavaScript and components.

Preactpreactjs/preact · ★ 39k · MIT Install options & downloads

Quick start

1Install Preact. Run npm install preact in your project folder. Make sure Node.js is installed first.
2Import render and h. Import h and render from 'preact' in the file where you build your interface, and set the JSX factory with /** @jsx h */.
3Render an element tree. Call render() with your tree and a parent DOM element, such as document.body. Call it again with updated content to change the output in place.
4Split the UI into components. Write function components that return elements, then pass the top-level component to render().
5Add state with hooks. Import useState from 'preact/hooks' and use it inside a component to store values that change, like a text input.

Install Preact with npm

Preact is installed as a package. The README gives one install command, which you run in your project folder with Node.js available. The README does not state a minimum Node.js version, so check your project's own requirements if you are unsure.

Prerequisite: Node.js (the README does not specify a version)
Install method: a package manager, npm

npm install preact

Render your first element with render()

With Preact you build user interfaces by assembling trees of components and elements. The render() function takes a tree description and creates the structure it describes, then appends it to a parent DOM element passed as the second argument.

Calling render() again reuses the existing tree and updates it in place. The README notes that Preact calculates the difference from the previous output to perform as few DOM operations as possible.

import { h, render } from 'preact';
/** @jsx h */

render(
  <main>
    <h1>Hello</h1>
  </main>,
  document.body
);

render(
  <main>
    <h1>Hello World!</h1>
  </main>,
  document.body
);

Build a component that keeps state with hooks

Once an interface grows, a single render() call becomes hard to manage. Components divide the interface into nested pieces, and each one calculates its own difference from the point where it is mounted. The README's example is a small component that stores an input value with the useState hook from preact/hooks.

The README lists ES6 classes, hooks and functional components as supported patterns, so you can choose the style you already use from React.

Import hooks from 'preact/hooks', for example useState
Pass the component to render() instead of raw elements
Use onInput to read the current value of a text field

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

/** @jsx h */

const App = () => {
  const [input, setInput] = useState('');

  return (
    <div>
      <p>Do you agree to the statement: "Preact is awesome"?</p>
      <input value={input} onInput={e => setInput(e.target.value)} />
    </div>
  );
};

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

Choose between JSX and HTM

The README says component descriptions are typically written in JSX, and it also mentions HTM, which uses standard JavaScript Tagged Templates. Both can express trees of elements with props, which work like HTML attributes, and children.

The examples above use JSX with the /** @jsx h */ comment. The README recommends configuring the JSX factory globally, pointing to Babel's documentation and to the jsxFactory option in tsconfig.

Reuse React code with preact/compat

The README describes Preact's React compatibility as extensive and provided through a simple preact/compat alias. This lets some React-based code run on Preact with little change.

The README does not list the limits of this compatibility. Test your React-only dependencies before you commit to the switch.

Alias name: preact/compat
Check each React-only library you depend on in a test build first

Server-side rendering and hydration

The README lists server-side rendering (SSR) among the built-in features and says Preact provides seamless hydration from server-rendered output. The README does not include SSR setup code, so follow the official Preact website for setup steps.

Features listed in the README: JSX, virtual DOM, DevTools, hot module replacement, SSR
Supports all modern browsers, according to the README

What people use it for

Building a small interactive widget, such as a form field that tracks its own value, using the hooks shown in the README example.
Shipping a lightweight interface where bundle size matters, such as pages loaded over slow connections.
Reusing existing React-style component code through the preact/compat alias, after testing it.
Rendering pages on the server and hydrating them in the browser for applications that need SSR.

Frequently asked questions

How do I install Preact?

Run npm install preact in your project folder. The README gives this as the install command, and it lists Node.js as the prerequisite without naming a version.

Is Preact free to use?

Preact is released under the MIT licence, as listed on its repository. MIT is a permissive open-source licence, but read the full licence text if your legal team needs details.

Is Preact the same as React?

No. The project describes Preact as a fast 4kB alternative to React with the same modern API. It offers a similar API, including components, hooks and JSX, and an optional preact/compat alias for React compatibility.

Can I use React libraries with Preact?

The README describes compatibility as extensive through the preact/compat alias. It does not list limits, so test each React-only library in your project before relying on it.

What are alternatives to Preact?

The project's comparable projects are React, Inferno and Vue. Compare them against your own needs, since the README does not include benchmarks or a feature-by-feature comparison.

Can Preact be used for mobile apps?

The README does not mention native mobile app development, so do not assume Preact covers it. It describes support for modern browsers and server-side rendering.

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

Preact suits web developers who already know React and want a smaller library, especially for pages where download size matters. Beginners without JavaScript experience, teams depending on many React-only libraries without testing, and anyone building native mobile apps should choose another option.

Install options & downloads