Skip to main content

Get started with Preact

Preact is a lightweight alternative to React. It provides the same1 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.



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+ templates2 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.