In this article, we analyze Object.preventExtensions() usage in React source code.

Object.preventExtensions() is called when the flag hasBadMapPolyfill is false and typeof Object.preventExtensions is a function.

But what does Object.preventExtensions() do?

Object.preventExtensions

The Object.preventExtensions() static method prevents new properties from ever being added to an object (i.e. prevents future extensions to the object). It also prevents the object’s prototype from being re-assigned.

// Example picked from MDN docs
const object1 = {};
Object.preventExtensions(object1);
try {
 Object.defineProperty(object1, 'property1', {
 value: 42,
 });
} catch (e) {
 console.log(e);
 // Expected output: 
 // TypeError: Cannot define property property1, object is not extensible
}

Read MDN docs about Object.preventExtension()

How React uses Object.preventExtension?

There must be a good reason why extensions are not allowed to be added. I followed along the function in which this is used, FiberNode function
calls Object.preventExtension on this, but which function calls FiberNode?

[createFiberImplClass](https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react-reconciler/src/ReactFiber.js#L213-L226)
calls Object.preventExtension.

This comment provides an explanation why an Object cannot be extended.

Although, I do not fully understand these functions, but found out how Object.preventExtensions can be used in real-world open-source projects.

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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions

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

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

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

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