How to fix Assignment to read-only properties is not allowed in strict mode in React

ReactINTERMEDIATEMEDIUMUpdated Dec 8, 2025· 129 views

This JavaScript strict mode error occurs when attempting to modify a property that has been marked as read-only, commonly through Object.freeze() or Object.defineProperty(). In React applications, this typically happens when directly mutating frozen state objects, props, or DOM properties.

Quick fix

Fixes Assignment to read-only properties is not allowed in strict mode

TypeError: Cannot assign to read only property 'propertyName' of object '#<Object>'
  1. Identify which property is read-only
  2. Create a copy before modifying state or props
  3. Fix DOM style property assignments
  4. Remove or handle Object.freeze() appropriately
react — error
TypeError: Cannot assign to read only property 'propertyName' of object '#<Object>'
Assignment to read-only properties is not allowed in strict mode

What this error means

This error is a JavaScript strict mode enforcement that prevents modification of properties marked as immutable. In strict mode, attempting to assign a value to a read-only property throws a TypeError, whereas in non-strict code the assignment would be silently ignored. In React applications, this error most commonly occurs when trying to directly mutate state objects or props that have been frozen (using Object.freeze()), when modifying properties defined with Object.defineProperty() without writable: true, or when attempting to assign values to inherently read-only DOM properties like the style object or window.event. The error serves as a safeguard to enforce immutability principles that are core to React's design. React expects state and props to be treated as immutable, and many libraries use Object.freeze() in development mode to catch accidental mutations early. This is particularly important in React's reconciliation process, where reference equality checks are used for performance optimization.

Typical symptoms

  • TypeError: "x" is read-only appears in the browser console
  • Application crashes with "Assignment to read-only properties is not allowed in strict mode"
  • Error only occurs in development mode with strict mode enabled, but not in production
  • IE11 or older Edge browsers throw errors while modern browsers work fine
  • Error appears when trying to modify component state or props directly
  • Occurs when assigning a string directly to element.style property
  • React Hook Form or other libraries throw "Cannot assign to read only property" errors

Common causes

  1. Attempting to mutate a state object or array directly instead of creating a new copy (violates React immutability)
  2. Using Object.freeze() on objects in development mode and then trying to modify their properties
  3. Defining properties with Object.defineProperty() without setting writable: true
  4. Assigning a string directly to element.style (e.g., element.style = "color: blue") instead of using style.cssText or individual properties
  5. Modifying window.event in IE11, which treats it as a read-only property in strict mode
  6. Using TypeScript with React.RefObject instead of React.MutableRefObject for useRef, making current property readonly
  7. Libraries like Redux or MobX freezing state objects in development to enforce immutability
  8. Attempting to modify props passed from parent components, which should always be treated as immutable

How to fix "Assignment to read-only properties is not allowed in strict mode"

1Identify which property is read-only

Check the error message to identify the exact property causing the issue. The error typically includes the property name:

bash
TypeError: Cannot assign to read only property 'propertyName' of object '#<Object>'

Use browser DevTools to inspect the object and verify its property descriptors:

javascript
const obj = { /* your object */ };
console.log(Object.getOwnPropertyDescriptor(obj, 'propertyName'));
// Check if writable: false
2Create a copy before modifying state or props

Never mutate React state or props directly. Instead, create a new copy:

javascript
// BAD - Direct mutation
this.state.user.name = 'John';  // Error!

// GOOD - Create new object
this.setState({
  user: { ...this.state.user, name: 'John' }
});

// For arrays - use spread or array methods
// BAD
this.state.items.push(newItem);  // Error!

// GOOD
this.setState({
  items: [...this.state.items, newItem]
});

For functional components with hooks:

javascript
const [user, setUser] = useState({ name: 'Jane', age: 25 });

// GOOD - spread operator creates new object
setUser({ ...user, name: 'John' });
3Fix DOM style property assignments

Don't assign strings directly to element.style. Use style.cssText or individual properties:

javascript
// BAD - This throws read-only error
element.style = "color: blue; font-size: 14px";

// GOOD - Use cssText
element.style.cssText = "color: blue; font-size: 14px";

// BETTER - Set individual properties
element.style.color = "blue";
element.style.fontSize = "14px";

// In React, use style object
<div style={{ color: 'blue', fontSize: '14px' }}>Content</div>
4Remove or handle Object.freeze() appropriately

If you've frozen an object and need to modify it, create a mutable copy:

javascript
const frozenObj = Object.freeze({ name: 'John', age: 30 });

// BAD
frozenObj.age = 31;  // Error in strict mode!

// GOOD - Create mutable copy
const mutableCopy = { ...frozenObj };
mutableCopy.age = 31;

// For nested frozen objects
const deepCopy = JSON.parse(JSON.stringify(frozenObj));
deepCopy.age = 31;

Note: Many React libraries freeze objects in development mode only. This helps catch bugs early without performance impact in production.

5Fix useRef TypeScript readonly errors

If using TypeScript with useRef and getting readonly errors, use the correct type:

typescript
// BAD - RefObject makes current readonly
const inputRef = useRef<HTMLInputElement>(null);
inputRef.current = someElement;  // Error!

// GOOD - MutableRefObject allows assignment
const inputRef = useRef<HTMLInputElement | null>(null);
inputRef.current = someElement;  // Works!

// Alternative - use as assertion if you know it won't be null
const inputRef = useRef<HTMLInputElement>(null!);
6Redefine property descriptors if configurable

If you control the object definition, ensure properties are writable:

javascript
const obj = {};

// Creating read-only property
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false,  // This causes the error
  configurable: true
});

// Redefine as writable
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: true,  // Now it can be modified
  configurable: true
});

obj.name = 'Jane';  // Works!

Check if property is configurable first:

javascript
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
if (descriptor && descriptor.configurable) {
  Object.defineProperty(obj, 'name', { writable: true });
}
7Handle IE11-specific issues

For IE11 compatibility issues with window.event:

javascript
// BAD - IE11 throws error in strict mode
window.event = customEvent;

// GOOD - Check browser and use polyfill
if (typeof window.event === 'undefined') {
  // Modern browsers
  document.dispatchEvent(customEvent);
} else {
  // IE11 - use different approach
  const evt = document.createEvent('Event');
  evt.initEvent('custom', true, true);
  document.dispatchEvent(evt);
}

Consider using polyfills or updating to modern browsers if possible, as IE11 is no longer officially supported by Microsoft.

Advanced notes

Development vs Production Behavior: Many React libraries (Redux, MobX, Immer) use Object.freeze() only in development mode to catch mutation bugs early without the performance overhead in production. This means errors might only appear during development, which is intentional to help you find bugs before deployment.

Immutability Libraries: Consider using libraries like Immer that make immutable updates easier with a mutable-looking API. Immer uses Proxies to track changes and produce immutable updates automatically.

Performance Considerations: While creating copies of objects might seem wasteful, React's reconciliation algorithm relies on reference equality checks for performance. Immutable updates enable shallow comparison (prevState !== nextState) which is much faster than deep equality checks.

Strict Mode in React: React's StrictMode component intentionally double-invokes certain functions in development to help detect side effects. This can make readonly errors more apparent if you're accidentally mutating objects.

Browser Compatibility: IE11 and old Edge versions are particularly strict about read-only properties compared to modern browsers. If targeting these browsers, test thoroughly in strict mode or consider transpilation strategies that avoid strict mode in legacy browsers.

Frozen Objects in State Management: When using state management libraries, frozen objects help enforce the unidirectional data flow pattern. Rather than disabling freezing, embrace immutable update patterns as they prevent entire classes of bugs related to unexpected state mutations.

Frequently asked questions

What does "Assignment to read-only properties is not allowed in strict mode" mean?
This error is a JavaScript strict mode enforcement that prevents modification of properties marked as immutable. In strict mode, attempting to assign a value to a read-only property throws a TypeError, whereas in non-strict code the assignment would be silently ignored. event.
How do I fix "Assignment to read-only properties is not allowed in strict mode"?
This JavaScript strict mode error occurs when attempting to modify a property that has been marked as read-only, commonly through Object.freeze() or Object.defineProperty(). In React applications, this typically happens when directly mutating frozen state objects, props, or DOM properties.
What causes "Assignment to read-only properties is not allowed in strict mode"?
Attempting to mutate a state object or array directly instead of creating a new copy (violates React immutability) Using Object.freeze() on objects in development mode and then trying to modify their properties Defining properties with Object.defineProperty() without setting writable: true
Is the "Assignment to read-only properties is not allowed in strict mode" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading