Preact vs React : A Comprehensive Comparison

React revolutionized front-end development and brought about a massive change in how we perceive and prioritize the importance of creating interactive and appealing user experiences. Its introduction to component-based architecture, Virtual DOM, and declarative syntax changed how web apps are built and maintained.

However, while React is popularly known for its reusable components, it still needs to improve in certain areas, such as performance and app bundle size. While these nuances can be ironed out by following React Performance Optimization Tips, it is still a hassle to get around such challenges.

So, what do we do to overcome such challenges?  – Look for alternatives to React!

What is a popular React alternative? Well, it’s called Preact.

Today, we will discuss the differences between Preact and React, their similarities, why Preact is a worthy option in the first place, and how to choose between Preact and React for your project.

Let’s start by getting the fundamentals of Preact vs React pointed out –

We will cover these differences to compare Preact and React further in the later sections. But before we get to that, let’s brush on the basics!

What is React? A Versatile JavaScript Library

React is a modern open-source JavaScript framework for building rich and interactive user interfaces. It was developed and maintained by Meta (formerly Facebook). It has gained immense popularity amongst web developers for its efficiency and flexibility in creating immersive and dynamic web apps.

Key Characteristics of React

Here are some of the key characteristics of React that make it stand out in comparison to Angular and Vue, as well as highlight its capabilities:

1. Virtual DOM:

React makes use of Virtual DOM for optimizing rendering performance. While most frameworks like Angular directly manipulate the actual ROM, React creates and updates a lightweight virtual copy first and then transfers those changes to the actual DOM. Doing so reduces actual DOM manipulations, which results in better performance.

2. Large Ecosystem:

React has a vast ecosystem with rich toolsets, libraries, and extensions, which makes it a suitable library for a variety of applications and scenarios. It also has a huge repository of third-party libraries and components that help developers streamline their dev process.

3. JSX:

React makes use of JSX – JavaScript XML, which allows React developers to write HTML-like code in their JS files. This makes it easier to create and manage the user interface.

4. Backward Compatibility:

React offers better backward compatibility than most frontend frameworks, which means old React components are likely to work for a long time, even when new versions of React are released. This stability helps enterprises trust React for their crucial project.

What is Preact? A lightweight React Alternative

Preact claims to be the fastest React alternative with an unbelievable size of just 3kb. It provides features similar to React while being significantly smaller and better optimized for performance. It is not meant to be an extension of React; it is a replacement or alternative to React. Despite this, Preact is designed to be compatible with React.

Also, since it follows and maintains a similar API and component structure to React, it becomes easier to migrate your React app to Preact with minimum changes to your existing Reat codebase. If you need proper guidance on how to shift your React project to React, you can refer to Preact’s official Switching to Preact documentation.

Key Characteristics of Preact

Here are the key characteristics that define Preact and emphasize its design philosophy and use case –

1. Component-Based Architecture:

Like React, Preact follows and emphasizes component-based architecture that encourages modularization. This practice and design philosophy promotes code reusability and maintainability.

2. Lightweight Library:

The major focus and USP of Preact is its lightweight nature in contrast to React. Preact uses a smaller virtual DOM and only takes up 3kb space, but yet has the same modern API and ECMA Script support as React. It is said to be one of the most lightweight libraries/frameworks on the market.

3. Performance Oriented:

Preact prides itself in its performance prowess. Due to its smaller size, it offers faster rendering and better memory usage, making it ideal for applications that require speed and responsiveness.

4. React Compatibility:

Preact is intentionally designed to be compatible with React. This enables developers to use React components with Preact without extensively modifying the React components. To enable React compatibility with React, you can use the preact/compact GitHub repository.

Preact vs React: Is Preact a worthy React Alternative?

Preact and React share common roots when it comes to following component-based architecture, making use of Virtual DOM and other such aspects. However, they have distinct differences when it comes to their core philosophies. Here are the major differences between Preact and React that you should know –

App Bundle Size

React is feature-rich and has many implementations, features, and functions pre-built in its ecosystem. This results in a relatively larger bundle size, which can negatively impact initial page loading times, especially with apps that use too many third-party libraries or dependencies.

Preact, however, is known for its compact size and hence leaves a lighter footprint. It only keeps the core view library with basic implementations like events and diffing. It removes React debugging and other such features entirely. This results in reduced bundled size and better memory management.

Performance

Preact is known for its exceptional performance capabilities. Due to its compact size, concise codebase, and a smaller virtual DOM, it can update components faster and more efficiently than React. Since Preact’s Virtual DOM is simplified, it minimizes the work needed for updates, resulting in faster runtime performance.

This is not to say React lacks anywhere in performance; it is still a preferable option for enterprise-grade or complex architecture-based apps. The reason it lacks performance compared to Preact is that its virtual DOM offers a more comprehensive list of features and optimizations needed to address challenges that come with complex apps. Still, it comes with a trade-off in performance to an extent.

Version Compatibility

Version compatibility is an important aspect of software development since poor version compatibility can lead to breakage in the application, complex troubleshooting and debugging, and unstable app environments.

Preact is designed to be fully compatible with React, which allows existing React applications to be migrated to Preact seamlessly with minimal code changes and app downtime.

React, although it provides frequent updates with proper support, documentation, and time between versions, it can still be challenging to make the necessary changes between two major updates that require extensive code modifications.

Debugging Messages and Errors

Debug messages and error handling are crucial aspects of any software development process. They help developers identify issues in the app, better understand app behavior, and ensure smooth debugging. Hence, any library that can identify errors and provide proper error messages is more reliable for developers to diagnose code problems and improve code quality. Let’s see how Preact and React handle debugging messages and errors –

Preact follows its core principle of a minimalistic approach by maintaining a basic core with adequate error handling and debugging capabilities. It naturally provides fewer debugging messages than React, but it ensures developers can efficiently maneuver through the troubleshooting and diagnosis of critical issues in their applications.

React, on the other hand, provides an extensive list of React debugging tools with proper error messages and debugging features. However, configuring these tools to work exactly for your project can be challenging.

Preact vs React Hooks

Hooks are one of the most important revolutions for state management in modern front-end development. They enhance code reusability, which makes it easier for developers to create interactive and complex user interfaces.

Preact introduced hooks, similar to React, providing similar functionality for managing the state and side effects of functional components. Its hooks work cohesively with its component-based architecture, improving code reusability and development.

React was the pioneer in introducing Hooks to modern JavaScript development. It has many built-in hooks like ‘useState‘ and ‘useEffect‘ for managing application state and lifecycle effects in functional components.

Events

Events enable user interactions and dynamic behavior in web apps. How a library manages events will impact its ability to deliver exceptional user experience, app responsiveness, and proper code organization.

Both Preact and React support event handling support event handling, allowing developers to create event listeners and handlers. However, there are differences between Preact and React in how they handle events like clicks, keyboard events, and hovers. Although both use event delegation to attach event handlers, they vary in setting up their naming conventions, pooling, and other such activities.

Ecosystem

There is no denying that React has one of the most reliable ecosystems, attributed to its massive developer community and being backed by Meta. There are many rich libraries and tools such as Redux, React Router and Next.JS that serve different purposes and enhance the overall performance and security standards of your project. Preact is fairly smaller in terms of ecosystem, it isn’t as matured as React. But many React libraries and tools can be used with Preact since they share similar APIs.

Development Speed

Both Preact and React offer efficient development experiences to the developers. React uses Virtual DOM for UI updates whereas Preact is known for its highly impressive rendering speed. They provide similar end experiences but differ in bundle size and execution speed significantly.

Learning Curve

They follow the same underlying component-based architecture and development concepts. React is a larger library with more features and service offerings which can make it slightly longer to grasp in comparison to Preact. However, good news is both these libraries have extensive documentation and community support.

Server-Side Rendering

React has proven its capabilities outside its initial scope of frontend development. It is a full-stack library capable of achieving some amazing feats in the server-side-rendering field. Libraries such as NextJS and introduction of React Server Components has increased its capabilities in this domain even further. Preact also has a fair share of SSR support, although it takes a bit of additional setup. You can use libraries like Preact-CLI and Preact-Compat to assist set up SSR with Preact applications.

Tooling Support

Both React and Preact come with impressive tooling support. React offers React developer tools and CRA whereas Preact has PreactDevTools and Preact CLI. React has more extensive tooling options, but both frameworks are capable of extending the capabilities of your project with proper tooling and community support.

Form Events

React and Preact offer similar capacities for handling form events. Both frameworks have a straightforward approach to state management and behaviour by using controlled and uncontrolled components. They offer handlers such as onChange and onSubmit for effective form handling.

React vs. Preact Event Handling Comparison Table

• Event Names: React uses camelCase for names like onClick, onMouseEnter, and more, whereas Preact users lowercase names like onclick and onmouseenter, following native HTML convention.
• Event Pooling: React pools and reuses SyntheticEvent objects for improving performance, whereas Preact does not pool events, leading to the creation of a new Event object each time.
• Delegation Target: React attaches all event handlers to the document root, whereas Preact attaches them directly to the parent component receiving the events.
• Event Object: React wraps native browser events using a cross-browser SyntheticEvent wrapper, whereas Preact directly passes the native browser to handlers without propping.
• Handler Binding: Handlers are bound to their component instance automatically in React but not in Preact.

Comparing the Pros and Cons of Preact and React

Now that we have studied their differences and similarities in detail, we should be able to identify some of the benefits and limitations of Preact and React to give us a better idea as to when and where they shine and where they lack.

Benefits of React Development

• Vast Ecosystem: React has a vast ecosystem with extensive community support, numerous third-party libraries and mature React developer tools like Redux, MobX, React Router and others.
• Robust Tooling: React offers robust tooling support with popular libraries like CRA, React Router and other such tools. They help streamline the development process while enhancing efficiency.
• Industry Standard: React is a widely adopted library adopted by many SMEs and enterprises to power their projects. React offers compatibility with existing tools, libraries and projects.
• Server-Side Rendering: React has excellent support for server-side rendering with libraries such as Next.js. This helps improve SEO performance by generating HTML files on the server and sending it to the client.

Limitations of React Development

• Complexity: React’s ecosystem and feature set can be intimidating for beginners. Understanding advance concepts like JSX, components and state management may require more time and effort.
• Performance Overhead: React’s Virtual DOM abstraction adds certain performance overheads compared to Preact’s lightweight rendering engine.
• Bundle Size: React’s bundle size is generally larger than Preact, which can lead to slower load times and increased bandwidth usage.

Benefits of Preact Development

• Lightweight: Preact is in essence a significantly lighter version of React to an extent, resulting to faster loading times, better performance and easier learning curve.
• Faster Rendering: Preact is known for its blazing fast rendering speed, achieved through optimizations like smaller runtime and a more efficient diffing algorithm.
• Minimalistic Approach: Preact adopts a minimalistic approach, providing only essential features without causing performance tolls. This leads to easier maintenance and faster development cycles.
• Ease of learning: Preact’s API resembles React’s API, resulting in a shallow learning curve, especially for seasoned React developers.

Limitations of Preact Development

• Smaller Ecosystem: Preact’s ecosystem is smaller compared to React with limited third-party libraries and tools available. This can be limiting for projects with diverse requirements or unique functionality.
• Less Adoption: Preact’s user base is smaller compared to React too, which means fewer resources, community support and tutorials.
• Lesser Tooling Support: Preact has a good tooling support, however it may lack some advanced tooling options and libraries compared to React.

React vs Preact – Preact’s Unique Features

Now that we have compared Preact and React on common grounds let us see what features are unique to Preact that are missing from React ecosystem. These features have been added by the (P) React community for convenience or to overcome challenges faced with React development. They are –

Native Support for ES6 Modules

Preact was designed and developed with ES6 modules at the core. It is one of the first frameworks to support those modules. Preact can be loaded directly in the browser using the import keyword without passing it through a bundler like Webpack first. React needs to use bundlers like React Webpack to import ES modules. This makes Preact more convenient without needing a complex build setup.

Arguments in Component Rendering

Arguments in component rendering refer to data/props that get passed to a component when rendered with a React or a Preact application. These augments have certain information needed by the component for functioning properly. The contents of arguments can be configuration settings, dynamic content, and any other data. Proper argument-handling facilities are important for creating flexible and reusable components.

Here is how Preact and React handle arguments in component rendering –

Preact Component Rendering

Preact takes a straightforward approach to handling component rendering. The component gets rendered, and Preact expects the arguments to be provided as an object-key value pair, more commonly known as Props. These props (properties) are accessible within the targeted component and can influence its behavior and rendering. It follows the minimal approach for performance optimization and only passes the necessary arguments to the components, which helps maintain a smaller app bundle size.

Here is a code example for component rendering in Preact –

function MyComponent(props) {
  return <div>{props.message}</div>;
}

const message = "Hello, Preact!";
Preact.render(
  <MyComponent message={message} />,
  document.getElementById("root"),
);

React Component Rendering

React also relies on props for handling arguments in the component rendering process. React components also get arguments from props, and its overall way of handling component rendering is similar to Preact since both platforms were designed to be compatible with each other.

React does have a more extensive list of libraries and features, such as React context and Hooks. Leveraging these features, a dedicated development team can implement advanced ways of managing and passing data to components, which can be extremely helpful for enterprise-grade applications.

Here is a code example for component rendering in React –

function MyComponent(props) {
  return <div>{props.message}</div>;
}

const message = "Hello, React!";
ReactDOM.render(
  <MyComponent message={message} />,
  document.getElementById("root"),
);

Preact vs React Component Rendering Overall Comparison

• A similar approach to handling arguments during component rendering, utilizing Props as the main mechanism for passing data.
• Preact follows a simplistic and performance design philosophy, encouraging developers to keep the size of rendered props as small as possible.
• React offers a large ecosystem to its developers with advanced features like context and hooks. This provides greater flexibility for handling arguments and managing states within components.

Raw HTML Attribute/Property Names

JSX allows mixing HTML tags with components in declarative syntax. JSX transforms to JavaScript in both React and Preact, but the attribute and property names have some noticeable differences. For instance –

React Raw HTML Attribute/Property Names

// React
<div className="header" tabIndex="0">

• React HTML Attribute/Property Names like class, tabindex, and others must be written in camelCase, like className and tabIndex in JSX.
• The JSX gets transpiled to React.createElement() calls, and camelCase is used for passing props.

Preact Raw HTML Attribute/Property Names

// Preact
<div class="header" tabindex="0">

• Raw HTML attribute names like class, readonly, and others can be directly used in JSX.
• Preact transforms JSX in a way that converts the HTML names to their camelCase equivalents when transpiling.
• This allows the use of familiar and simpler HTML conventions in Preact.

Using SVG inside JSX

Embedding SVGs inside your JSX, whether in Preact or React, offers many benefits. SVGs are XML-based vector images that are resolution-independent. They can be manipulated by skilled front-end developers via CSS and JavaScript. Adding them to your project enhances the flexibility and interactivity of web applications.

SVGs have different naming styles for their properties and attributes. Some properties are camelcased, some attributes follow kebab-case, and others are generally in all lower cases.

// React
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  <circle fill="none" strokeWidth="2" strokeLinejoin="round" cx="24" cy="24" r="20" />
</svg>
// Preact (note stroke-width and stroke-line join)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
  <circle fill="none" stroke-width="2" stroke-linejoin="round" cx="24" cy="24" r="20" />
</svg>

As you can see, when we add SVG to JSX in React, all the attributes need to be mentioned in camelCase, like strokeWidth, strokeLinejoin, viewBox, and more. This means the developers need to actively consider converting the different naming conventions to camelCase to use SVGs inside JSX effectively.

How is adding SVG inside JSX different in Preact than React?

Preact applies SVG attributes as written. You can copy the unmodified SVG snippet and paste it in your Preact app, and the SVG will work out of the box. There is no need to convert them to camelCase like in React. This improves interoperability.

However, an experienced React developer who is used to the camelCase configuration can make use of the Preact Compat library, which mirrors React API and normalizes these attributes.

No contextTypes needed

In React, to use Context API, you need to make the components declare specific properties using React’s contextTypes or childContextTypes for receiving those values. With Preact, there is no need, as all components receive all context properties produced by getChildContext() by default.

Children API

Preact’s children API offers utilities for managing component children, allowing developers to manipulate and traverse them efficiently. It includes functions such ‘Children.map’ for iterating over children with ‘Children.only’ to ensure only a single child is passed.

Specialized Components

Preact comes packed with specialized components that may not be as necessary for every app but are useful to most projects. Some of them are –

• PureComponent: only updates if props or state have changed
• forwardRef: supplies a ref to a specialized child component
• lazy: lazy load async code and mark a tree as ready/not ready accordingly (experimental)
• memo: same idea as PureComponent but allows custom comparison function
• Portals: continues rendering current tree in different DOM container

Preact or React – How do you choose between the two?

Now that we have a proper understanding of Preact and React and their potential as a frontend library, we should emphasize how to select the right path to your project’s success. This will depend on certain managerial decisions and a proper understanding of your strengths and weaknesses. Here is a general guide that might help you choose between Preact and React –

Consider Preact when –

1. Bundle Size Takes Priority: Preact is known for its small bundle size. Suppose your project needs to minimize download and parse times. In that case, if you are developing applications for environments with limited bandwidth or need faster loading times, Preact can be a way better option than React.
2. Performance Efficiency is Crucial: The lightweight Preact architecture and efficient rendering process make it well-suited for applications that require higher performance, like single-page applications, progressive web applications, or interactive data visualization.
3. React Compatibility is important: For projects that are already based on React and want to reduce the transition effort, Preact is the perfect choice. You can gradually migrate your React project to Preact to get exclusive Preact features while maintaining your existing React codebase.
4. You Prefer Simplicity and Minimalism: Preact has a straightforward approach to front-end development. It can be mastered by entry-level as well as senior React developers. If you prefer having a simpler learning curve with still a highly performant library, Preact can be a great choice.
5. Smaller Ecosystem is Acceptable: Preact has a decent ecosystem with essential tools and packages. However, it is going to feel significantly limited in comparison when compared to React’s extensive ecosystem.

Consider React when –

1. The Projects are Large and Complex: React is well-suited and flexible to handle large or complex app requirements since it can provide an extensive and comprehensive ecosystem, robust react state management tools support.
2. You need advanced features and State Management: React has many advanced features such as Context API, hooks, popular third-party React UI frameworks, and much more. These features help for a project that requires complex state management facilities.
3. You want a reliable Dev Community and Resources: React has a vast and active developer community with many resources, libraries, and third-party tools. It also has extensive documentation and forums where common development problems are discussed frequently. Hence, you will never feel stuck in your React project.
4. You need Compatibility with Industry Standards: React is widely recognized and used by many leading industry experts for their projects. Hence, it is a safe choice for projects that require adherence to safety measures and compliances in their respective industry.

Wrapping Up!

Choosing between Preact and React will depend on the project size, performance goals, compatibility needs, ecosystem requirements, developer expertise, project complexity, etc. Carefully evaluate all such features before choosing React over Preact or Preact over React.