score:3

Accepted answer

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.


Related Query

More Query from same tag