React: Are classes without a state still considered stateless / clean?

Question

I am refactoring my application to make more components of idle / clean components; that is, they are just functions. However, I noticed that some components will need to connect to the redux repository through mapStateToProps . This makes me do something like this:

 const someComp = (props) => { const { funcFromReduxStore, } = props; return ( ... <SomeComponent func={ funcFromReduxStore(myArgs) } ... ); }; 

This will not work because I am executing funcFromReduxStore . An easy solution is to wrap the support in an arrow function. However, this causes a lot of unnecessary b / c re-rendering, the function will not be bound.

Then the question arises: how to bind a function in a stateless component?

Is it still stateless if I make it a class without a constructor and create a class instance field like this:

 class someComp extends React.Component { const { funcFromReduxStore, } = this.props, wrapper = (x) => funcFromReduxStore(x) // equivalent way to bind w/ ES8+ render() { ... <SomeCompnent func={ wrapper(myArgs) }/> ... } } 

I have no constructor or state. I want to keep comopnent stateless, but I also want to bind a function to avoid unnecessary retries. I also want to continue to hold him stateless. B / c React said there will be performance benefits for stateless people. Does this qualify as a workaround?

Answer 1

The short answer is no. Stateless functional components should be simple functions.

You should take a look at the Recompose library for some really cool helpers that will allow you to leverage your SFCs.

If you are trying to prevent unnecessary re-renderings, you can look at onlyUpdateForKeys() or pure() .

EDIT: So, I thought about it a bit and found this wonderful article on Responsive Component Rendering Performance . One of the key points in this article regarding your question:

Stateless components are not internally wrapped in a class without any of the optimizations currently in use, according to Dan Abramov.

From a tweet in July 2016

So I was wrong. "Stand-alone functional components" are classes ... for now. The confusing thing is that there have been theoretical performance improvements :

In the future, it will also be possible to optimize performance for these components, avoiding unnecessary checks and memory allocation.

At this point, I think the answer to your question becomes largely subjective. When you create a class that extends the React component, any instances of your class get the setState prototype setState . This means that you have the ability to set the state. Does this mean that this condition, even if you are not using the state? Thanks to @Jordan for the link to the code . SFCs only get the rendering method on the prototype when they are wrapped in a React class.

There are only two reasons why you might think that you want to bind a function:

• To give the function access to this (component instance). From your example, it seems you don't need it.
• To ensure that the function passed as a support for the child component always retains the same identifier. The wrapper function in your example seems unnecessary. The identity of the function is determined by the parent component (or mapStateToProps or any HOC).

You should also take a look at the React PureComponent , which does the same shallow validation as the recompose pure() HOC does.