From React to Preact

Before I even rebuilt this site as a blog, it housed a little React app that I used to pick out board games using the Board Game Atlas API. It’s existed on this site through several rebuilds, on a previously unlinked Games page.

It never needed a framework. It’s just a basic filter. I had started it as a learning project when first getting into React and then, since the first version of this site was built with React-based Gatsby, I just kept it in React. Since moving to Astro, it’s been the only React on the site.

I could (and still probably should) just rewrite it in vanilla JS, but I was curious about the option of switching to Preact.

It came down to pnpm astro add preact and this one change at the top of the main GameList component:

/* /components/GameList.jsx */

- import React, { useEffect, useState } from "react";
+ import { useEffect, useState } from "preact/hooks";

That’s it. It just worked.

While I was at it, I moved the data fetching to the Astro page component so it will be fetched at build time and the client doesn’t have to hit the Board Game Atlas API on every page load. I pay the $25/yr to support the API, but there’s no reason to hit it more than necessary.

So one slightly modified line of code saved around 30k of JS. Another five-minute refactor to move the data fetching to the page component removed an unnecessary API call. Fantastic.