test the new react compiler (https://react.dev/learn/react-compiler)

.github/dependabot.yml

@@ -20,6 +20,8 @@ updates:
           - "@types/react"
           - "@types/react-dom"
           - "@types/react-is"
+          - "babel-plugin-react-compiler"
+          - "eslint-plugin-react-compiler"
       prisma:
         patterns:
           - "prisma"

app/contact/page.tsx

@@ -23,7 +23,7 @@ const Page = () => {
       <PageTitle canonical="/contact">Contact</PageTitle>
 
       <p>
-        Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
+        Fill out this quick form and I&rsquo;ll get back to you as soon as I can! You can also{" "}
         <Link href="mailto:jake@jarv.is">email me directly</Link> or send me a{" "}
         <Link href="https://fediverse.jarv.is/@jake">direct message on Mastodon</Link>.
       </p>

app/page.tsx

@@ -38,11 +38,11 @@ const Page = () => {
   return (
     <div className={styles.page}>
       <h1>
-        Hi there! I'm Jake. <span className={styles.wave}>👋</span>
+        Hi there! I&rsquo;m Jake. <span className={styles.wave}>👋</span>
       </h1>
 
       <h2>
-        I'm a frontend web developer based in the{" "}
+        I&rsquo;m a frontend web developer based in the{" "}
         <Link
           href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
           title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
@@ -150,7 +150,7 @@ const Page = () => {
         >
           the Tooth Fairy
         </Link>
-        . <span style={{ color: "var(--colors-medium-light)" }}>I've improved a bit since then, I think? 🤷</span>
+        . <span style={{ color: "var(--colors-medium-light)" }}>I&rsquo;ve improved a bit since then, I think? 🤷</span>
       </p>
 
       <p>
@@ -235,7 +235,7 @@ const Page = () => {
         >
           LinkedIn
         </Link>
-        . I'm always available to connect over{" "}
+        . I&rsquo;m always available to connect over{" "}
         <Link href="/contact" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
           email
         </Link>{" "}

app/previously/page.tsx

@@ -42,7 +42,7 @@ const Page = () => {
 
       <Figure src={img_wayback} alt="Timeline of this website's past." priority className={styles.screenshot}>
         ...the <Link href="https://web.archive.org/web/20010501000000*/jakejarvis.com">Cringey Chronicles&trade;</Link>{" "}
-        of this website's past.
+        of this website&rsquo;s past.
       </Figure>
 
       <HorizontalRule className={styles.divider} />

app/zip/page.tsx

@@ -51,7 +51,7 @@ const Page = () => {
         <br />
         <span style={{ color: "#929292" }}>
           # TODO(someone else): make super duper sure this only deletes actual zip files and *NOT* the sketchy domains
-          ending with file extensions released by us & purchased on our registrar (which i just yeeted btw cuz i'm bored
+          ending with file extensions released by us & purchased on our registrar (which i just yeeted btw cuz i&apos;m
           & also my evil superpowers are fueled by my reckless disregard for the greater good of the internet). - xoxo
           sundar <span style={{ color: "#f95757" }}>&lt;3</span>
         </span>

contexts/ThemeContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useCallback, useEffect, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import { useLocalStorage, useMediaQuery } from "../hooks";
 import type { Context, PropsWithChildren } from "react";
 
@@ -30,47 +30,26 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
   // https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
   const isSystemDark = useMediaQuery("(prefers-color-scheme: dark)");
 
-  // updates the DOM and optionally saves the new theme to local storage
-  const applyTheme = useCallback(
-    (theme: Themes, updateStorage?: boolean) => {
-      if (updateStorage) {
-        setPreferredTheme(theme);
-      }
-
-      document.documentElement.dataset.theme = theme;
-    },
-    [setPreferredTheme]
-  );
-
-  // listen for changes in OS preference
+  // listen for changes in OS preference, but don't save it as a website preference to local storage
   useEffect(() => {
-    // translate boolean to theme string
-    const systemResolved = isSystemDark ? "dark" : "light";
+    setSystemTheme(isSystemDark ? "dark" : "light");
+  }, [isSystemDark]);
 
-    // keep track of the system theme whether or not we override it manually
-    setSystemTheme(systemResolved);
-
-    // only actually change the theme if preference is unset (and *don't* save new theme to storage)
-    if (!preferredTheme) {
-      applyTheme(systemResolved, false);
-    }
-  }, [applyTheme, preferredTheme, isSystemDark]);
-
-  // color-scheme handling (tells browser how to render built-in elements like forms, scrollbars, etc.)
+  // actual DOM updates must be done in useEffect
   useEffect(() => {
-    // only "light" and "dark" are valid here
-    // https://web.dev/color-scheme/#the-color-scheme-css-property
-    const colorScheme = preferredTheme && ["light", "dark"].includes(preferredTheme) ? preferredTheme : systemTheme;
+    // only "light" and "dark" are valid themes
+    const resolvedTheme = preferredTheme && ["light", "dark"].includes(preferredTheme) ? preferredTheme : systemTheme;
 
-    document.documentElement.style?.setProperty("color-scheme", colorScheme);
+    // this is what actually changes the CSS variables
+    document.documentElement.dataset.theme = preferredTheme ?? systemTheme;
+
+    // less important, but tells the browser how to render built-in elements like forms, scrollbars, etc.
+    document.documentElement.style?.setProperty("color-scheme", resolvedTheme);
   }, [preferredTheme, systemTheme]);
 
   const providerValues = {
     theme: preferredTheme ?? systemTheme,
-    setTheme: (theme: Themes) => {
-      // force save to local storage
-      applyTheme(theme, true);
-    },
+    setTheme: setPreferredTheme,
   };
 
   return (

eslint.config.mjs

@@ -16,7 +16,7 @@ const compat = new FlatCompat({
 export default [
   { ignores: ["README.md", ".next", ".vercel", "node_modules"] },
   ...compat.config({
-    plugins: ["css-modules"],
+    plugins: ["react-compiler", "css-modules"],
     extends: ["eslint:recommended", "next/core-web-vitals", "next/typescript", "plugin:css-modules/recommended"],
   }),
   ...eslintCustomConfig,
@@ -38,20 +38,7 @@ export default [
       camelcase: "off",
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-explicit-any": "warn",
-      "react/no-unescaped-entities": "off",
-      "react/jsx-boolean-value": "error",
-      "react/jsx-wrap-multilines": [
-        "error",
-        {
-          arrow: "parens-new-line",
-          assignment: "parens-new-line",
-          condition: "parens-new-line",
-          declaration: "parens-new-line",
-          logical: "parens-new-line",
-          prop: "ignore",
-          return: "parens-new-line",
-        },
-      ],
+      "react-compiler/react-compiler": "error",
     },
   },
   {
@@ -63,7 +50,6 @@ export default [
       "mdx/remark": "warn",
       "mdx/code-blocks": "off",
       "react/jsx-no-undef": "off", // components are injected automatically from mdx-components.ts
-      "react/no-unescaped-entities": "off",
     },
   },
 ];

hooks/useLocalStorage.ts

@@ -3,23 +3,14 @@
 import { useCallback, useState, useRef } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
-const noop = () => {};
-
 const useLocalStorage = <T = string>(
   key: string,
   initialValue?: T
 ): [T | undefined, Dispatch<SetStateAction<T | undefined>>, () => void] => {
-  if (typeof window === "undefined" || typeof window.Storage === "undefined") {
-    // immediately return a "dummy" hook instead of throwing an error if localStorage isn't available, either in the
-    // browser or because this hook is being called server-side.
-    return [initialValue as T, noop, noop];
-  }
-
   // TODO: make these customizable (e.g. `JSON.stringify()` and `JSON.parse()`)
   const serializer = (value: T | undefined) => String(value);
   const deserializer = (value: string) => value as unknown as T;
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const initializer = useRef((key: string) => {
     try {
       // deserialize and return existing value if it's already been set
@@ -40,10 +31,8 @@ const useLocalStorage = <T = string>(
     }
   });
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [state, setState] = useState<T | undefined>(() => initializer.current(key));
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const set: Dispatch<SetStateAction<T | undefined>> = useCallback(
     (valOrFunc) => {
       try {
@@ -59,7 +48,6 @@ const useLocalStorage = <T = string>(
     [key, state] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const remove = useCallback(() => {
     try {
       window.localStorage.removeItem(key);

next.config.ts

@@ -31,6 +31,7 @@ const nextConfig: NextConfig = {
     serverActions: {
       allowedOrigins: ["jarv.is", "jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion"],
     },
+    reactCompiler: true, // https://react.dev/learn/react-compiler
     ppr: "incremental", // https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering#using-partial-prerendering
   },
   eslint: {

package.json

@@ -42,11 +42,11 @@
     "obj-str": "^1.1.0",
     "polished": "^4.3.1",
     "prop-types": "^15.8.1",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.0.0-beta-26f2496093-20240514",
+    "react-dom": "19.0.0-beta-26f2496093-20240514",
     "react-error-boundary": "^5.0.0",
     "react-innertext": "^1.1.5",
-    "react-is": "19.0.0",
+    "react-is": "19.0.0-beta-26f2496093-20240514",
     "react-textarea-autosize": "^8.5.8",
     "react-turnstile": "^1.1.4",
     "react-tweet": "^3.2.2",
@@ -78,6 +78,7 @@
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "@types/react-is": "^19.0.0",
+    "babel-plugin-react-compiler": "19.0.0-beta-3229e95-20250315",
     "cross-env": "^7.0.3",
     "eslint": "^9.22.0",
     "eslint-config-next": "15.3.0-canary.14",
@@ -88,6 +89,7 @@
     "eslint-plugin-mdx": "^3.2.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "19.0.0-beta-3229e95-20250315",
     "eslint-plugin-react-hooks": "^5.2.0",
     "lint-staged": "^15.5.0",
     "prettier": "^3.5.3",