Preact vs React: A Comparative Guide
Tags: preact, react, javascript, tutorial
Published: 2024-04-23 13:21:45

<p>In this post, we get to know more about <a href="https://preactjs.com/" target="_blank" rel="noopener">Preact</a>,
    one of this year's trending libraries. And we'll compare it to <a href="https://react.dev/" target="_blank"
        rel="noopener">React</a> to see which one suits better for our projects.</p>
<p>Today, React is one of the most popular libraries for front-end development. It breaks web applications into multiple
    components that work independently and makes them easier to develop and maintain. Then why consider a replacement
    for it? We'll find out during these comparisons.</p>
<h2>What is Preact?</h2>
<p><strong>Preact is a fast, light, and powerful replacement for React</strong> that has been able to gain the trust of
    web developers over time. It's an improvement to React, and <strong>it's very easy to migrate to</strong>.</p>
<h3>Key Features</h3>
<ul>
    <li><strong>JSX</strong>: Both libraries use JSX syntax which allows you to write HTML inside JavaScript. This makes
        components easier to develop and maintain and makes the code more readable.</li>
    <li><strong>Components</strong>: Both use a similar approach in terms of using components. Allowing your application
        to divide into multiple parts that are reusable and can compose with each other to create bigger complex
        components.</li>
    <li><strong>Life cycle</strong>: They both can properly handle the life cycle of applications and you can determine
        to run specific codes in any part of the application life cycle using hooks and React/Preact built-in methods.
    </li>
    <li><strong>State management and context</strong>: With a similar system, they both allow you to dynamically change
        and render the User Interface of your application.</li>
    <li><strong>SSR (Server Side Rendering)</strong>: They both support SSR although they use a bit different ways to
        handle it. Either way you get all the tools you need to render the content on the server.</li>
    <li><strong>Development Utilities</strong>:&nbsp;Each library provides its own set of development tools, such as
        command-line interfaces (CLIs) and browser extension developer tools. These utilities are essential for creating
        projects, configuring their environment and debugging the application.</li>
    <li><strong>Preact Compat (or <code>preact/compat</code>)</strong>: A useful tool I strongly recommend using
        alongside Preact. It transforms imports from <code>react</code> or <code>react-dom</code> to Preact, so for
        example, when you <code>import { useState } from 'react'</code> , it actually imports it from Preact. This
        feature gives you the ability to <strong>use Preact without modifying your codebase</strong>, which
        significantly simplifies the process of migrating projects to Preact or reverting back to React.</li>
</ul>
<h2>Main Differences</h2>
<p>While there are many aspects that can be compared between these two libraries, to keep this post short, we will focus
    mainly on the key differences explored in the following sections.</p>
<h3>Bundle Size Difference</h3>
<p>React's gzipped bundle size is around 45KB. In contrast, <strong>the combined bundle size of Preact and Preact Compat
        is only 9KB</strong>, which is remarkably smaller.</p>
<p>This clear difference in bundle size is crucial not just for users with poor internet connections, but also for those
    with low-end devices. A smaller bundle ensures a smooth user experience across all devices, regardless of their
    hardware capabilities.</p>
<h3>Performance</h3>
<ul>
    <li><strong>Event Handling</strong>: One of the main differences between these two libraries is their approach to
        handling events across the application. React uses <strong>a synthetic system to manage events</strong> for each
        component. This ensures cross-browser consistency, optimal performance, and avoids event duplication during
        every render. On the other hand, Preact achieves these goals by <strong>utilizing the
            <code>addEventListener</code> method</strong>, which is the natural way of handling events in JavaScript.
        This approach makes Preact's application performance even better.</li>
    <li><strong>Bundle Size</strong>: As mentioned earlier, Preact's remarkably small bundle size is another significant
        factor contributing to a smoother user experience.</li>
    <li><strong>PWA (Progressive Web App)</strong>: Preact is a <strong>PWA by default</strong>, which makes it
        incredibly fast to load on subsequent reloads.</li>
</ul>
<p>It's worth noting that one of React's key features for enhancing application performance and reducing initial load
    times is lazy loading libraries and components. This functionality is currently experimental in Preact, but it'll
    soon be stable and ready for production use in projects.</p>
<figure><img src="https://rezaghorbani.dev/img/blog/preact-benchmark.webp"
        alt="Benchmark Results for Front-End Libraries on TodoMVC">
    <figcaption>
        <p class="whitespace-pre-wrap break-words">Benchmark Results for Front-End Libraries on TodoMVC</p>
    </figcaption>
</figure>
<p>&nbsp;</p>
<h3>Ecosystem and Community</h3>
<p>Although the number of people using and developing Preact is increasing, <strong>the vastness of React's community is
        undoubtedly larger</strong> and more established than its rival's. It's also worth mentioning that React's
    development team, which is Facebook, certainly provides better support and development compared to Preact.</p>
<p>However, the good news is that thanks to Preact's compatibility with React's ecosystem, we can use almost every
    feature and library developed for React inside Preact. For example, Redux, MobX, styled-components, Material UI, and
    more.</p>
<p>As you can see in the following chart, <strong>Preact's community population is rapidly growing</strong>, and it's
    already one of the most downloaded libraries on NPM, despite some of these libraries being significantly older than
    Preact.</p>
<figure class="image"><img src="https://rezaghorbani.dev/img/blog/framework-downloads.webp"
        alt="NPM Download Stats for Front-End Frameworks in September 2023.">
    <figcaption>NPM Download Stats for Front-End Frameworks in September 2023.</figcaption>
</figure>
<p>&nbsp;</p>
<h2>So, React or Preact? Which one to use?</h2>
<p>The answer to this question depends on your needs and the project you're developing.</p>
<ul>
    <li><strong>React</strong>: If your project requires a more flexible and complex API on a large scale, full
        compatibility with React's ecosystem is essential, and you feel a strong need for the community support offered
        by the library you use, React is a more suitable option.</li>
    <li><strong>Preact</strong>: If speed, performance, and being lightweight are your priorities in your application,
        and being largely compatible and adaptable with React's ecosystem is sufficient for you, I recommend using
        Preact for your current and future projects.</li>
</ul>
<p>In rare and specific cases, some libraries may use certain features of React that might not be supported in Preact.
    However, even in those situations, thanks to <strong>Preact Compat</strong>, you can easily migrate back to React
    with minimal changes to your project's configurations.</p>
<h2>Conclusion</h2>
<p>Both libraries have similar syntax and architecture and are powerful options for web development. The vast population
    of React's community, Facebook's support and development, and its flexible and expanding ecosystem make it a better
    choice for large-scale projects.</p>
<p>At the same time, Preact, with its growing compatibility with its rival's ecosystem and faster performance compared
    to React, is a suitable option for common projects.</p>
<p>Certainly, over time, <strong>the distance between these two libraries will likely become shorter</strong>, and
    perhaps they may even merge.</p>
<p>In the <a href="https://dev.to/rezaghorbani/preact-setup-a-beginners-guide-118a" target="_blank" rel="noopener">next post</a>, we'll learn
    how to create a Preact project from scratch.</p>
<p>Thanks for reading this article! ✌️</p>

<p>
<blockquote>This article was originally published on <a href="https://rezaghorbani.dev/blog" target="_blank">my blog</a>. Please feel free to explore more of my writings.
</blockquote>
</p>