What are the advantages of Stateless Function Components over ES6 Class Components?

Question

I often read that, if possible, I should use Stateless Function Components, but mostly without explanation. What are the benefits?

Answer 1

Firstly, stateless function components look faster because there is an optimized shortcut for them in the optimized rendering pipeline.

Secondly, the code is much cleaner since you print less and there is almost no visual noise. Of course, if you are using modern JS. Check this out, I define some "custom tags":

const MyFancyDiv = ({ children, ...otherProps }) => (
    <div { ...otherProps } className='i-am-fancy-wrapper'>
        { children }
    </div>
);

, , , .

React, - . , .