Combined Usage of State and Props: How to Pass Complex Data

In React.js, state and props are core concepts for building components. State is used to manage data and logic within a component, while props are used to pass data from parent components to child components. The combined use of both allows efficient handling of complex data but requires adherence to specific principles to avoid performance issues and logical confusion.

Comparison Between State and Props

State serves as the internal data source for a component, typically created via useState, possesses persistence, and is suitable for managing dynamically changing data. In contrast, props are data passed between components, usually from parent to child, possess temporality, and are ideal for transmitting static or localized data.

Combined Usage of State and Props

Passing Simple Data
When passing simple data (such as strings or numbers), it can be directly implemented via props. For example:
```
const Parent = () => {
  const name = "Alice";
  return <Child name={name} />;
};
```
This approach is straightforward and intuitive, but when data structures become complex, it can lead to difficult-to-maintain code.
Passing Complex Data
When passing nested objects, arrays, or functions, props should be used for transmission rather than storing them directly in state. For example:
```
const Parent = () => {
  const user = {
    name: "Bob",
    address: {
      city: "New York",
      zip: "10001"
    }
  };
  return <Child user={user} />;
};
```
Passing complex data via props avoids state pollution while maintaining component testability and maintainability.
Avoiding Unnecessary Rendering
When prop data changes, React re-renders the component. Therefore, frequent updates to props should be avoided, especially when data does not need to change. Performance can be optimized using useMemo or useCallback.

Techniques for Handling Complex Data

Use Nested Objects: Pass nested objects via props to avoid redundant data duplication.
Use Arrays and Functions: When passing multiple pieces of data or dynamic logic, transmit arrays or functions via props to enhance component flexibility.
Avoid Deep Copying: When transmitting objects, refrain from using JSON.parse or Object.assign; instead, pass references via props to ensure data mutability is preserved correctly within the context of immutability principles.

Best Practices

Maintain Single Responsibility for Props: Each prop should transmit only one piece of data, avoiding deep nesting of multiple datasets.
Use Immutability: When modification of prop data is required, return new data via a function rather than directly modifying the original data.
Avoid State Pollution: Use state solely to manage internal component logic and use props for transmitting external data; avoid mixing state with props usage.

Summary

The combined usage of state and props represents a core method in React.js for handling data. By reasonably designing prop transmission for complex data, the maintainability and performance of components can be significantly improved. The key lies in understanding the scope of action for both entities, avoiding data pollution, and enhancing efficiency through optimization techniques (such as memoization).