DEV Community

Cover image for BadMapPolyfill in React Source Code.
thinkThroo
thinkThroo

Posted on

BadMapPolyfill in React Source Code.

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;
 }
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

new Person();
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

Top comments (0)