Container Components and Stateless Functional Components in React – Zsolt Nagy

  • Let’s introduce functional components: – – has become a function with a argument, returning the return value of the method of the original implementation.
  • Implications of the structure of stateless functional components: – – In the introduction, I mentioned that stateless functional components come with performance benefits.
  • Typically, container components have the following properties: – – The rule of thumb for choosing the appropriate syntax for React components is the following: – – then it is advised to use stateless functional components.
  • Let’s put theory into practice, and transform all the stateless component in our chat application into functional components.
  • Reviewing the conditions for modeling a component with a function, we can see that there is absolutely nothing preventing us from creating a functional equivalent of the class.

We will now introduce another way to define simple components. You will not only write less code, but you will also benefit from performance optimizations done by React. Let’s introduce functional components:

In the article Building a Chat Component in React and ES6, we learned a way to create React components:

This simple component is written by extending .

We will now introduce another way to define simple components. You will not only write less code, but you will also benefit from performance optimizations done by React. Let’s introduce functional components:

has become a function with a argument, returning the return value of the method of the original implementation.

You can either use the ES6 arrow function syntax, or the regular ES5 function syntax. I personally prefer arrow functions, as they are more compact.

The functional syntax does not allow you to use component lifecycle methods. As you won’t be able to use either, your component has to be stateless. This is where the name stateless functional component comes from.

Stateless functional components have no state. They get data exclusively from their props. They are typically used as dumb presentational components. As these components are simple, they encourage writing clean, testable code. Absence of state manipulation implies that you don’t need mocking or external libraries to fully test them. After all, a stateless functional component does nothing else, but takes props, and returns the markup of the component.

Implications of the structure of stateless functional components:

Container Components and Stateless Functional Components in React – Zsolt Nagy