Why props are read only in React

Theory

In React, props are read-only for several important reasons, primarily related to the principles of functional programming and the architecture of the React component model. Here are the key reasons:

1. Immutability for Predictability

Immutability helps to make the data flow and state management in applications more predictable and easier to understand. When props are immutable, you can be sure that the data passed to a component will not change unexpectedly, making it easier to track the state and behavior of the application.

2. Unidirectional Data Flow

React relies on a unidirectional (one-way) data flow. This means data flows from parent components to child components via props. This approach simplifies data management and helps to avoid the complexities that come with bidirectional data flow, such as circular dependencies and state inconsistency.

3. Pure Functions and Functional Components

React components, especially functional components, are often written to behave like pure functions with respect to their props. This means they return the same output given the same input (props) and do not cause side effects. Making props read-only ensures components are predictable and easier to debug.

4. Component Re-usability

Read-only props enhance the re-usability of components. Since components rely on props that do not change, they can be reused in different parts of an application or in different projects without concern that they will be modified unexpectedly.

5. Encapsulation and Component Boundaries

Props represent the external interface of a component. By treating props as read-only, React enforces clear boundaries between components, promoting better encapsulation. Each component manages its own state internally, without being affected by external changes to its props.

Practical Example

Consider a simple example to illustrate these points:

 // ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = "Hello, World!";

  return (
    <div>
      <ChildComponent message={data} />
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';

const ChildComponent = ({ message }) => {
  return (
    <div>
      <p>{message}</p>
    </div>
  );
};

export default ChildComponent;

In this example:

• ParentComponent passes the data string to ChildComponent as a prop (message).

• ChildComponent receives this prop and uses it to display a message.

Attempting to Modify Props

If you attempt to modify the prop within ChildComponent, it would not work as intended and goes against React's design principles:

// Incorrect: Attempting to modify props
const ChildComponent = ({ message }) => {
  message = "New Message"; // This is incorrect and should be avoided

  return (
    <div>
      <p>{message}</p>
    </div>
  );
};

Instead, the proper approach is to keep props immutable and, if a change is necessary, manage it at the parent level or via the component's own state:

// Correct: Managing state changes at the parent level
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState("Hello, World!");

  const changeMessage = () => {
    setData("New Message");
  };

  return (
    <div>
      <ChildComponent message={data} />
      <button onClick={changeMessage}>Change Message</button>
    </div>
  );
};

export default ParentComponent;

In summary, props in React are read-only to promote predictable, maintainable, and reusable components, adhering to the principles of unidirectional data flow and immutability.

Disclaimer:

Image created using Microsoft Designer

Text writing support taken from ChatGPT