WeakMap in react-scan vs next-mdx source code.

In this article, we will review the below code snippet picked from react-scan source code.

const cache = new WeakMap<object, string>();

export function fastSerialize(value: unknown, depth = 0): string {
  ...
  if (value === null) return 'null';

  if (cache.has(value)) {
    const cached = cache.get(value);
    if (cached !== undefined) {
      return cached;
    }
  }

This is picked from a file, instrumentation.ts.

This is the second time I am writing about WeakMap. Previously, I wrote an article about WeakMap in JavaScript and this was a review about a code snippet from next-mdx source code and the code looks like below:

const cache = new WeakMap()

/**
 * A webpack loader for mdx-rs. This is largely based on existing @mdx-js/loader,
 * replaces internal compilation logic to use mdx-rs instead.
 */
function loader(value, bindings, callback) {
  ...
  const compiler = this._compiler || marker

  let map = cache.get(compiler)

  if (!map) {
    map = new Map()
    cache.set(compiler, map)
  }
...

What’s one thing that’s common here? cache….

Below is how cache is initialized in react-scan source code:

const cache = new WeakMap<object, string>();

Below is how cache is initialized in next-mdx source code

const cache = new WeakMap()

Well, there is types in the react-scan source code.

WeakMap

A WeakMap is a collection of key/value pairs whose keys must be objects or non-registered symbols, with values of any arbitrary JavaScript type, and which does not create strong references to its keys. That is, an object's presence as a key in a WeakMap does not prevent the object from being garbage collected. Once an object used as a key has been collected, its corresponding values in any WeakMap become candidates for garbage collection as well — as long as they aren't strongly referred to elsewhere. The only primitive type that can be used as a WeakMap key is symbol — more specifically, non-registered symbols — because non-registered symbols are guaranteed to be unique and cannot be re-created.

Read more about WeakMap.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github —  https://github.com/ramu-narasinga

My website —  https://ramunarasinga.com

My Youtube channel —  https://www.youtube.com/@thinkthroo

Learning platform —  https://thinkthroo.com

Codebase Architecture —  https://app.thinkthroo.com/architecture

Best practices —  https://app.thinkthroo.com/best-practices

Production-grade projects —  https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/aidenybai/react-scan/blob/main/packages/scan/src/core/instrumentation.ts#L125

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

3. https://medium.com/@ramu.narasinga_61050/lessons-from-opensource-weakmap-in-javascript-d7882bbf01f7