This content originally appeared on DEV Community and was authored by thinkThroo
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:
https://github.com/facebook/react/blob/main/packages/react/src/BadMapPolyfill.js
https://github.com/search?q=repo%3Afacebook%2Freact%20hasBadMapPolyfill&type=code
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
This content originally appeared on DEV Community and was authored by thinkThroo
thinkThroo | Sciencx (2024-09-28T20:36:20+00:00) BadMapPolyfill in React Source Code.. Retrieved from https://www.scien.cx/2024/09/28/badmappolyfill-in-react-source-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.