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(); 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(); 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: https://github.com/aidenybai/react-scan/blob/main/packages/scan/src/core/instrumentation.ts#L125 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap https://medium.com/@ramu.narasinga_61050/lessons-from-opensource-weakmap-in-javascript-d7882bbf01f7

Mar 14, 2025 - 07:19

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();

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();

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.

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