In this article, we study the packages/react/src/BadMapPolyfill.js file source code.

/**
 * Copyright © Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @flow
 */
export let hasBadMapPolyfill: boolean;
  if (__DEV__) {
   hasBadMapPolyfill = false;
   try {
     const frozenObject = Object.freeze({});
     /* eslint-disable no-new */
     new Map([[frozenObject, null]]);
     new Set([frozenObject]);
     /* eslint-enable no-new */
   } catch (e) {
     // TODO: Consider warning about bad polyfills
     hasBadMapPolyfill = true;
 }
}

Map’s been available across browsers since July 2015. The Map object holds key-value pairs and remembers the original insertion order of the keys.

This code above tries to create a new Map and new Set in a try block and if it fails, it is caught in the catch block and hasBadMapPolyfill set to true, otherwise hasBadMapPolyfill remains false.

eslint-enable no-new

ESLint docs states that no-new disallows new operators outside of assignments or comparisons. The goal of using new with a constructor is typically to create an object of a particular type and store that object in a variable, such as:

var person = new Person();

It’s less common to use new and not store the result, such as:

new Person();

This rule is aimed at maintaining consistency and convention by disallowing constructor calls using the new keyword that do not assign the resulting object to a variable.

Map and Set pollyfills:

Map in MDN docs provides a link to Map polyfill available in core-js

Set in MDN docs provides a link to Map polyfill available in core-js

Where is this hasBadMapPollyfill used?

hasBadMapPollyfill is used in /packages/react-reconciler/src/ReactFiber.js

Except the code you see in BadMapPollyfill is written here again. I do not know the reason why.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:

1. https://github.com/facebook/react/blob/main/packages/react/src/BadMapPolyfill.js

2. https://eslint.org/docs/latest/rules/no-new

3. https://developer.mozilla.org/en-US/docs/Glossary/Polyfill

4. https://github.com/search?q=repo%3Afacebook%2Freact%20hasBadMapPolyfill&type=code

5. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react-reconciler/src/ReactFiber.js#L207

6. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

7. https://github.com/zloirock/core-js#map

8. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

9. https://github.com/zloirock/core-js#set