Make React Props Readonly in Typescript

Question

I heard that React Props is read only by default, however, I could overwrite props value in a component without errors. Is there settings to make props read only?

interface Props {
  readonly isText: boolean;
}

const ComponentA: FC<Props> = ({isText}: Props) {
  isText = false // <- I can change isText even if I add readonly. why?

  return <>{isText}</>
}

Answer 1

Typescript won't detect error when you decompose the object. Try to access it as an object

const ComponentA: React.FC<Props> = (prop: Props) => {
  prop.isText = false; // <- error

  return <div>{prop.isText}</div>
}

Demo