hrgui
08/15/2022

Going from React to Preact

Preact

I made the jump from React to Preact just recently for this website. It was interesting.

Why did I do it?

My mission for this website is to always chase after speed. Make the website extremely fast without sacrificing anything.

Fast 3kB alternative to React with the same modern API

In total, that would be 44.5 kb, while Preact alone is just 4kB minified and gzipped. That’s a 10x reduction!

Note that I did not add preact-compat, because for my use case in the website, I don’t need it.

There’s also performance claims that preact’s faster, but for what I have here, it is probably negligible.

So that’s why I did it. I just wanted this website to be fast. I wanted to show what I am capable of doing when it comes to reaching out for speed.

Losses

  • React DevTools doesn’t work. However, Preact DevTools does work.
  • I cannot just simply import React libraries. I need to evaluate whether I need preact-compat.

Issues I encountered and how I fixed them

React.Children

props.children is always an array in Preact. However, I used toChildArray to also guarantee it.

@testing-library/react

I have to use @testing-library/preact instead.

Hooks

Hooks comes from preact/hooks instead of react.

Renderer

Since I use TypeScript and Vite, this was easy:

In tsconfig.json, I added the following:

{
  "jsx": "react-jsx",
  "jsxImportSource": "preact"
}

In Astro, I switched to @astrojs/preact instead of @astrojs/react. In vitest, I used @preact/preset-vite instead of @vitejs/plugin-react.

TypeScript

Now this is the stuff that requires a Google or search in Stack Overflow.

I cannot just simply use @types/react. It doesn’t work that way. I have to use the preact types. It’s probably because I don’t have preact-compat.

  • React.ReactNode is ComponentChildren
  • React.HTMLProps and React.SVGProps is JSX.HTMLAttributes and JSX.SVGAttributes
  • React.ReactElement is JSX.Element

Everything else was similar. I either imported from preact or preact/hooks.

Moving forward

I am always striving to make this website the fastest possible to demonstrate what I can do as a Software Engineer. I want to see how I can surpass my limits to deliver the best and awesome web applications. I’m not attached to any JS framework out there. I want to learn how to give the best for our users.

To see these changes in action, here were the relevant commits:


Addendum

Fitting a square peg in a round hole.

Don’t get me wrong. It doesn’t mean that if I converted my website to Preact that I’ll move everything to React. I’ll only do it if it makes sense. I work on my website by myself, and the website is very minimal in footprint. It also gives me good practice to become a better Frontend Engineer than relying on React libraries like material-ui or react-bootstrap for my site. So that is why I moved my entire website to Preact. I am always trying to improve my craft, or what we call, surpass my limits (anime reference).

Moving actual, real-life applications with large teams with Preact requires a lot of research and buy-in from the team. If the team isn’t for it, I would not do it. It just carries more tech debt. Later on, they might re-convert it back to React.

hrgui

Harman Goei (hrgui) is a developer that loves to make cool and awesome web applications. His strength is in HTML, CSS, JavaScript, but he is willing to code anywhere in the stack to make the web be awesome.

© 2023 Harman Goei