Notes from reading swr source code

Source code at GitHub vercel/swr.

How to check if we are using the latest version of React:

export const IS_REACT_LEGACY = !React.useId;

Is this running on server?

export const isWindowDefined = typeof window != "undefined";
export const IS_SERVER = !isWindowDefined || "Deno" in window;

This snippet! Helps when using withing Next.

// React currently throws a warning when using useLayoutEffect on the server.
// To get around it, we can conditionally useEffect on the server (no-op) and
// useLayoutEffect in the browser.
export const useIsomorphicLayoutEffect = IS_SERVER
  ? useEffect
  : useLayoutEffect;

I forgot that useState doesn't have to be destructured!

const rerender = useState<Record<string, unknown>>({})[1];

And now, for the ultimate "rerender" hack:

if (IS_REACT_LEGACY) {
  rerender({});
} else {
  (React as any).startTransition(() => rerender({}));
}

Now I need to read up on startTransition and how it works.

Finally, this whole file is ripe for stealing and embedding! web-preset.ts. Especially for projects that need to detect online presence and are maybe not using SWR.

This was fun! The source will require re-reading as there are many more hidden gems inside it. Especially related to typing.