[Copilot]

React props should be immutable to enforce unidirectional data flow and prevent child components from modifying parent state.

Changes

Wrapped props parameters with TypeScript's Readonly<> utility type in 6 functional components:

• AtomInfo - PeriodTable atom information display
• OutinerRow - PeriodTable row rendering
• AboutDialog - Application about dialog
• ErrorsCheck - Molecule validation errors display
• FooterContent - Recognition dialog footer
• RecognizeDialog - Structure recognition from image

Before:

function AtomInfo({ el, isInfo }: AtomInfoProps) {
  // ...
}

After:

function AtomInfo({ el, isInfo }: Readonly<AtomInfoProps>) {
  // ...
}

This prevents accidental prop mutations while maintaining identical runtime behavior.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Refactor: Mark the props of the component as read-only</issue_title>
<issue_description>Problem:
React props should be read-only

Why is this an issue?
React props should be read-only because it helps to enforce the principle of immutability in React functional components. By making props read-only, you ensure that the data passed from a parent component to a child component cannot be modified directly by the child component. This helps maintain a clear data flow and prevents unexpected side effects.

If props were mutable, child components could modify the props directly, leading to unpredictable behavior and making it harder to track down bugs. By enforcing read-only props, React promotes a more predictable and maintainable codebase. Additionally, read-only props enable performance optimizations in React’s rendering process by avoiding unnecessary re-renders of components.

Overall, enforcing read-only props in React helps improve code reliability, maintainability, and performance.

interface Props {
  name: string;
}

function Welcome(props: Props) { // Noncompliant: The component props are not read-only
  return <div>Hello {props.name}</div>;
}

You should use TypeScript’s utility type Readonly to make your functional component props read-only.

interface Props {
  name: string;
}

function Welcome(props: Readonly<Props>) {
  return <div>Hello {props.name}</div>;
}

Alternatively, you can use TypeScript’s modifier readonly to mark all the props of your functional component individually as read-only.

interface Props {
  readonly name: string;
}

function Welcome(props: Props) {
  return <div>Hello {props.name}</div>;
}

Problem locations:
packages/ketcher-react/src/script/ui/views/modal/components/PeriodTable/components/AtomInfo/AtomInfo.tsx:26
packages/ketcher-react/src/script/ui/views/modal/components/PeriodTable/components/ElementsTable/components/OutinerRow.tsx:31
packages/ketcher-react/src/script/ui/views/modal/components/meta/About/About.tsx:35
packages/ketcher-react/src/script/ui/views/modal/components/process/Check/components/ErrorsCheck.tsx:46
packages/ketcher-react/src/script/ui/views/modal/components/process/Recognize/Recognize.tsx:50
packages/ketcher-react/src/script/ui/views/modal/components/process/Recognize/Recognize.tsx:103</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Refactor: Mark the props of the component as read-only #8563

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.