Notes from reading swr source code

Reading source code from battle tested open source projects leads to learning fun concepts and utilities

Profile pictureToni Petrina
Published on 2022-08-081 min read

    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) {
    } 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.

    Change code theme: