Container Components and Stateless Functional Components in React – Zsolt Nagy

Container Components and Stateless Functional Components in #ReactJS:

  • 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:

@ReactiveConf: Container Components and Stateless Functional Components in #ReactJS:

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

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:

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.

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:

In the introduction, I mentioned that stateless functional components come with performance benefits. The absence of state manipulation and lifecycle methods enabled React core to implement some shortcuts. When stateful components perform expensive checks and memory allocations, stateless functional components do nothing.

Stateless functional components are managed by container components. Typically, container components have the following properties:

The rule of thumb for choosing the appropriate syntax for React components is the following:

If your component

then it is advised to use stateless functional components. The last criterion needs some explanation. Whenever you render a component, all child functions are re-created. In order to avoid the performance tax of re-instantiating functions, use class components instead.

Let’s put theory into practice, and transform all the stateless component in our chat application into functional components. Recall the chat application introduced in this article.

class.

This is the most straightforward component you can possibly transfer into a functional component, as it does nothing else, but transfer its props into JSX.

For the transformation to work, you need to apply the following steps:

After these three steps, the result will look like this:

component works in the exact same way. The original code looks like this:

After the transformation, you get the following result:

component.

callback.

class.

The question is, how can we model the callback?

callback as a nested function inside the function body. You don’t need to worry about binding or the context anymore, as the function will be accessible to you inside the function.

The only problem with this approach is that the handler function is recreated each time the DOM is rendered.

event handler heavily relies on the component refs.

refs. Often times this is an indication that we are better off keeping the component class-based. Furthermore, introducing state to the component may be beneficial: we can create a controlled component with all its benefits described in the article.

context in front of the refs.

Visit the reference solution by clicking this CodePen link. You can see that our application works in the exact same way as the one at the beginning of this article.

Hopefully you are now convinced that stateful functional components are easy to construct. As these components come with many benefits, including performance and testability, I highly recommend using them in your React applications.

Container Components and Stateless Functional Components in React – Zsolt Nagy