Compare preact vs react - NPM Package Comparison

</a> </p> <p align="center">Fast <b>3kB</b> alternative to React with the same modern API.</p>

All the power of Virtual DOM components, without the overhead:

Familiar React API & patterns: ES6 Class, hooks, and Functional Components
Extensive React compatibility via a simple preact/compat alias
Everything you need: JSX, <abbr title="Virtual DOM">VDOM</abbr>, DevTools, <abbr title="Hot Module Replacement">HMR</abbr>, <abbr title="Server-Side Rendering">SSR</abbr>.
Highly optimized diff algorithm and seamless hydration from Server Side Rendering
Supports all modern browsers and IE11
Transparent asynchronous rendering with a pluggable scheduler

💁 More information at the Preact Website ➞

</td> </tr> </tbody> </table>

You can find some awesome libraries in the awesome-preact list :sunglasses:

Getting Started

💁 Note: You don't need ES2015 to use Preact... but give it a try!

Tutorial: Building UI with Preact

With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in JSX (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.

To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(
	<main>
		<h1>Hello</h1>
	</main>,
	document.body
);

// update the tree in-place:
render(
	<main>
		<h1>Hello World!</h1>
	</main>,
	document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:

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);

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

License

MIT

No README available

	Stars	Issues	Version	UpdatedⓘLast publish date	CreatedⓘPackage creation date	SizeⓘMinified + Gzipped size
P preact	38,690	149	10.29.2	a month ago	11 years ago	install size 4.7 KB
R react	245,785	1,287	19.2.7	a month ago	15 years ago	install size 2.8 KB

Stars

Issues

Version

UpdatedⓘLast publish date

CreatedⓘPackage creation date

SizeⓘMinified + Gzipped size

preact

38,690

149

10.29.2

a month ago

11 years ago

install size 4.7 KB

react

245,785

1,287

19.2.7

a month ago

15 years ago

install size 2.8 KB

Dependencies Comparison

preact

Dependencies

Dev Dependencies

@actions/github^6.0.0

@actions/glob^0.5.0

@babel/core^7.26.0

@babel/plugin-transform-react-jsx^7.25.9

@babel/plugin-transform-react-jsx-source^7.25.9

@babel/preset-env^7.26.0

@babel/register^7.25.9

@types/chai^5.0.1

@types/mocha^10.0.0

@types/node^18.19.87

@types/sinon^17.0.3

@vitest/browser^3.2.1

@vitest/coverage-istanbul^3.2.1

babel-plugin-transform-rename-properties0.1.0

chai^5.2.0

coveralls^3.1.1

cross-env^7.0.3

errorstacks^2.4.1

esbuild^0.24.0

husky^9.1.7

kolorist^1.8.0

microbundle^0.15.1

mocha^11.0.0

npm-run-all2^7.0.0

oxfmt^0.32.0

oxlint^0.15.12

preact-render-to-string^6.5.0

prop-types^15.8.1

sade^1.8.1

sinon^19.0.2

sinon-chai^4.0.0

terser5.16.0

typescript5.1.6

undici^4.12.0

vite^6.2.0

vitest^3.2.1

playwright^1.52.0

Peer Dependencies

react

Dependencies

Dev Dependencies

Peer Dependencies

Getting Started

Tutorial: Building UI with Preact

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(
	<main>
		<h1>Hello</h1>
	</main>,
	document.body
);

// update the tree in-place:
render(
	<main>
		<h1>Hello World!</h1>
	</main>,
	document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

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);

💁 More information at the Preact Website ➞

Getting Started

Tutorial: Building UI with Preact

Sponsors

Backers

License

Who's Using These Packages

preact

parcel

evidence

wener

OneJS

astro-snipcart

react

design-system-react

luci-go

geoplumber

benefit

vhealth-gatsby

Dependencies Comparison

preact

Dependencies

Dev Dependencies

Peer Dependencies

react

Dependencies

Dev Dependencies

Peer Dependencies

💁 More information at the Preact Website ➞

Getting Started

Tutorial: Building UI with Preact

Sponsors

Backers

License

Dependencies Comparison

preact

Dependencies

Dev Dependencies

Peer Dependencies

react

Dependencies

Dev Dependencies

Peer Dependencies

Who's Using These Packages

preact

parcel

evidence

wener

OneJS

astro-snipcart

react

design-system-react

luci-go

geoplumber

benefit

vhealth-gatsby