Get started with Preact

  Hey there! This article is being published a "work in progress," which means that it is not done. So take everything with a grain of salt.

I may or may not come back and finish this article. Regardless, I hope that it's helpful in its current state.

Preact is a lightweight alternative to React. It provides the same[1] modern API but at only 3kB minified and gzipped. For comparison, bundlephobia has react and react-dom at 38.5kB.

With many of the same features at a fraction of the size, Preact might be a better alternative for your simple client-side React app.

Sandbox #


The Preact website has a REPL where you can test drive the library. The example as of writing using state and effect hooks and makes a request to the GitHub API with fetch:

const [items, setItems] = useState([]);

useEffect(() => {
.then(res => res.json())
.then(data => setItems((data && data.items) || []));
}, []); #

CodeSandbox has 54,000+ templates[2] for Preact, including a starter template from the CodeSandbox Team. The code is similar to the official REPL, but with a class component:

export default class App extends Component {
componentDidMount() {
.then(r => r.json())
.then(json => {
results: (json && json.items) || []

render(props, { results = [] }) {
return (
<div class="list">
{ => <Result result={result} />)}


  1. Mostly. ↩︎

  2. Based on a template search for “preact”. I did not verify this count. ↩︎


My name is Sean McPherson (SeanMcP), and I am a software engineer based in Pittsburgh, PA. Here I write articles about programming for developers of all levels.