Skip to main content

Get started with Preact

Preact is a lightweight alternative to React. It provides the same^[Mostly.] 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+ templates^[Based on a template search for “preact”. I did not verify this count.] 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} />)}

About the author

Sean McPherson is a software engineer for Khan Academy who specializes in web and mobile app development. He lives with his wife, sons, and dog in Pittsburgh, PA.