Stateful and Stateless Components#

Components are self-sustaining, independent micro-entities that describe a part of the UI and can break down the UI of the application into smaller components, each with its own code, structure, and API. In simple terms, components allow you to split the UI into independently reusable code snippets and think about each snippet independently.

Description#

In React, components are mainly divided into two categories based on their state: stateless components and stateful components. Generally, components created using the class keyword, with their own private data this.state and lifecycle functions, are stateful components, while components created using function with only props and without their own private data and lifecycle functions are stateless components.

Stateless Components#

A stateless component, also known as a Stateless Component, is the most basic form of component, as it is purely for static display without the influence of state. Typically, it is the first category of components developed in various UI libraries, such as buttons, labels, input boxes, and so on. Its basic structure consists of properties props and event function calls. Due to the absence of state updates, this type of component has the strongest reusability. Since stateless components do not have their own state and lifecycle functions, they exhibit high runtime efficiency.

• Solely responsible for rendering DOM by accepting props.
• Unable to access lifecycle methods.
• Does not need to declare a class, thereby avoiding extends or constructor-like code, making the syntax more concise.
• Not instantiated, hence cannot directly pass a ref, but can use React.forwardRef to wrap and then pass a ref.
• Does not need to explicitly declare the this keyword. In class declarations of ES6, functions often need to bind the this keyword to the current scope, but due to the nature of functional declaration, this is no longer necessary.
• Better performance, as functional components do not need to manage lifecycles and states. Therefore, React does not need to perform specific checks or memory allocations, ensuring better performance.

In essence, if a component does not need to manage state and only serves for pure display, it can be defined as a stateless component.

function Hello(props) { 
    return (
        <div>Hello {props.name}</div>
    )
}

For such stateless components, using a functional declaration makes the code more readable and greatly reduces the amount of code. Using arrow functions can make the code more concise.

const Todo = (props) => ( 
    <div onClick={props.onClick}>{props.text}</div> 
)

Stateful Components#

A stateful component, also known as a Stateful Component, is built on the foundation of stateless components. When a component internally contains a state that changes with events or external messages, it becomes a stateful component. Stateful components usually have lifecycles to trigger state updates at different times. This type of component is commonly used in writing business logic, and the number of component states and the lifecycle mechanism vary depending on different business scenarios.

class Hello extends React.Component{
  constructor(props){
    super(props);
    this.state = { 
      tips: "Hello World!"
    }
  }
  componentDidMount() {
    console.log("ComponentDidMount", this);
  }
  componentWillUnmount() {
    console.log("ComponentWillUnmount", this);
  }
  render() {
    return (
      <div>{this.state.tips}</div>
    );
  }
}

Daily Question#

References#