What are the advantages of 'Stateless Function Components' over 'ES6 Class Components'? [closed]

Question

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

Answer 1

First, stateless function components renders faster, as there's an optimized short-path for them in React rendering pipeline.

Second, the code is much cleaner, since you're typing less and there are almost no visual noise. If you use modern JS, of course. Check it out, I'm defining some "custom tag":

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

For everything which doesn't have a state, context, or custom lifecycle methods this is the preferred way.

And it's actually the feature of React which makes it very hard to beat for any other framework. Use it when you can.