How to fix TypeError: Cannot assign to read-only property of object in React

// Error will show something like:
// TypeError: Cannot assign to read-only property 'name' of object '#<Object>'

// Common culprits:
function MyComponent(props) {
  props.value = 'new value'; // ❌ Props are read-only
  return <div>{props.value}</div>;
}

// ❌ Wrong - mutating props
function Counter(props) {
  props.count = props.count + 1;
  return <div>{props.count}</div>;
}

// ✅ Correct - use state for mutable values
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1); // Proper state update
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

// ✅ Correct - callback to parent for prop changes
function ChildComponent({ value, onValueChange }) {
  return (
    <input
      value={value}
      onChange={(e) => onValueChange(e.target.value)}
    />
  );
}

// ❌ Wrong - sorting frozen array
function SortedList({ items }) {
  const sorted = items.sort(); // Fails if items is frozen
  return <ul>{sorted.map(item => <li key={item}>{item}</li>)}</ul>;
}

// ✅ Correct - create copy before sorting
function SortedList({ items }) {
  const sorted = [...items].sort(); // Spread creates new array
  return <ul>{sorted.map(item => <li key={item}>{item}</li>)}</ul>;
}

// For objects:
const frozenUser = Object.freeze({ name: 'John', age: 30 });

// ❌ Wrong
frozenUser.age = 31;

// ✅ Correct - create new object
const updatedUser = { ...frozenUser, age: 31 };

// Or use Object.assign
const updatedUser2 = Object.assign({}, frozenUser, { age: 31 });

// ❌ Wrong - current is readonly
const inputRef = useRef<HTMLInputElement>(null);
inputRef.current = document.getElementById('input') as HTMLInputElement;
// Error: Cannot assign to 'current' because it is a read-only property

// ✅ Correct - union type with null makes it mutable
const inputRef = useRef<HTMLInputElement | null>(null);
inputRef.current = document.getElementById('input') as HTMLInputElement;

// For callbacks:
function MyComponent() {
  const callbackRef = useRef<(() => void) | null>(null);

  useEffect(() => {
    callbackRef.current = () => {
      console.log('Callback executed');
    };
  }, []);

  return <button onClick={() => callbackRef.current?.()}>Click</button>;
}

// react-hook-form example with Immer
import { useForm } from 'react-hook-form';
import produce from 'immer';

function FormComponent() {
  const { register, handleSubmit, setValue } = useForm();

  // ❌ Wrong - passing frozen object to onChange
  const handleChange = (frozenData) => {
    setValue('field', frozenData); // Fails with immutable data
  };

  // ✅ Correct - convert to plain object first
  const handleChange = (frozenData) => {
    const plainData = JSON.parse(JSON.stringify(frozenData));
    setValue('field', plainData);
  };

  // Or use Immer's produce correctly
  const updateData = (data) => {
    const newData = produce(data, draft => {
      draft.field = 'new value'; // Immer handles immutability
    });
    setValue('field', newData);
  };

  return <form onSubmit={handleSubmit(onSubmit)}>...</form>;
}

// Explicit strict mode
"use strict";

// ES6 modules are automatically in strict mode
import React from 'react';

// React.StrictMode in development
function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}