Component Props and State in React.js

In React application development, Props are the infrastructure for building reusable, high-cohesion components. They represent the sole mechanism by which parent components pass data to child components, embodying React's advocated "unidirectional data flow" architectural principle. Unlike state, Props are immutable; this means once set, their values will never be modified throughout the component's lifecycle. Understanding this characteristic is crucial for writing robust code, as any attempt to directly modify Props will be ignored or result in logical errors.

In practical development, receiving props is typically completed through the parameter list of a function component. When rendering child elements, parent components pass the required data as arguments. For example, to create a UserCard component that displays user information, we can define the following structure:

function UserCard({ name, age }) {
  return <div>{name} is {age} years old.</div>;
}

When invoking this component, we simply need to pass the corresponding values. This mechanism not only simplifies data flow logic but also ensures data clarity. Since Props are read-only, child components cannot actively change values passed from parent components. This forces developers to notify the parent component for a re-render via event callbacks whenever information needs to be updated. While this design increases the linear complexity of code (requiring explicit handling of state changes), it greatly enhances the predictability and maintainability of the application.
If Props are static data containers, then State is the core mechanism in React responsible for tracking and updating dynamic UI content. State is an object or array containing data that records the component's current internal condition. When data changes, developers need to call the setState method (or use useState with Hooks in function components), which triggers a re-render of the component and reflects the latest UI state.

Unlike Props, State is mutable and controlled by the child component itself. This means a component can independently possess its own lifecycle and update logic without waiting for external instructions. For example, in a counter application, we need to maintain the current count value:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, count is the State, while setCount is its corresponding update function. Each time the button is clicked, setCount is called with a new value; React detects the change and automatically re-renders the component to display the latest count result. This mechanism ensures that the UI remains consistent with the data source (i.e., "one-way binding").

Collaborative Working Mode of Props and State

In actual project scenarios, Props and State often collaborate to build complex interaction logic. A typical example is form processing: the parent component may pass initial values or validation rules to child components via Props, while the child component uses its own State to store user input and manage temporary states (such as loading indicators, error messages, etc.).

This clearly defined design pattern brings significant maintenance advantages. First, it achieves separation of concerns, where each component only cares about the data and logic it is responsible for; second, because the data flow is clear, debugging becomes easier; finally, component testability is greatly improved because the behavior of a child component is entirely determined by the Props it receives and its own State.

It is worth noting that while React allows directly modifying the reference to setState within a function (which can be useful in certain specific optimization scenarios), this is typically considered an anti-pattern as it breaks purity and predictability of functions. The best practice is always to create a new State reference and pass it to the update function, letting React manage the timing of re-renders. By reasonably applying Props and State, developers can build flexible yet stable single-page application architectures.