Component with shouldComponentUpdate vs stateless Component. Performance?

Question

I know that Stateless components are a lot more comfortable to use (In specific scenarios), But since you cannot use shouldComponentUpdate, Doesn't that mean that the component will re-render for each props change?. My question is whether or not its better (Performance-wise) to use a class component with a smart shouldComponentUpdate than use a stateless component.

Are stateless components a better solution as far as performance goes? consider this silly example:

const Hello =(props) =>(
       <div>
           <div> {props.hello}</div>
           <div>{props.bye}</div>
       </div>);

vs

class Hello extends Component{
    shouldComponentUpdate(nextProps){
        return nextProps.hello !== this.props.hello
    };
    render() {
        const {hello, bye} = this.props;
        return (
            <div>
               <div> {hello}</div>
               <div>{bye}</div>
           </div>
        );
    }
}

Let's assume these components both has 2 props and only one of them we want to track and update if changed (which is a common use-case), would it be better to use Stateless functional component or a class component?

UPDATE

After doing some research as well I agree with the marked answer. Although the performance is better in a class component (with shouldComponentUpdate) it seems as the improvement is negligible for simple component. So my take is this:

For complex components use class extended by PureComponent or Component (Depending on if you were gonna implement your own shouldComponentUpdate)
For simple components Use functional components even if it means that the rerender runs
Try to cut the amount of updates from the closest possible class base component in order to make the tree as static as possible (if needed)

Possible duplicate of [React Stateless components - performance and PureRender](https://stackoverflow.com/questions/41185752/react-stateless-components-performance-and-purerender) — Mayank Shukla, Aug 21 '17 at 11:03
@MayankShukla So general rule of thumb would be that stateful with shouldComponentUpdate is preferable as far as performance goes?. would that mean that performance-wise there is no reason to use stateless am I right? — Jony-Y, Aug 21 '17 at 11:27
as per [Don's tweet](https://twitter.com/dan_abramov): *There is no “optimized” support for them yet because stateless component is wrapped in a class internally. It's same code path.* check this nice [**article**](http://moduscreate.com/react_component_rendering_performance/) on the same topic. Currently there is no improvement but in future may be. — Mayank Shukla, Aug 21 '17 at 11:59

enapupe · Accepted Answer · 2017-08-21T13:15:11.630

I think you should read Stateless functional components and shouldComponentUpdate #5677

For complex components, defining shouldComponentUpdate (eg. pure render) will generally exceed the performance benefits of stateless components. The sentences in the docs are hinting at some future optimizations that we have planned, whereby we won't allocate an internal instance for stateless functional components (we will just call the function). We also might not keep holding the props, etc. Tiny optimizations. We don't talk about the details in the docs because the optimizations aren't actually implemented yet (stateless components open the doors to these optimizations).

https://github.com/facebook/react/issues/5677#issuecomment-165125151

There are currently no special optimizations done for functions, although we might add such optimizations in the future. But for now, they perform exactly as classes.

https://github.com/facebook/react/issues/5677#issuecomment-241190513

I also recommend checking https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

To measure the change, I created this benchmark, the results are quite staggering! From just converting a class-based component to a functional one, we get a little 6% speedup. But by calling it as a simple function instead of mounting, we get a ~45﹪ total speed improvement.

To answer the question: it depends. If you have complex/heavy components you probably should implement shouldComponentUpdate. Otherwise going with regular functions should be fine. I don't think that implementing shouldComponentUpdate for components like you Hello will make big difference, it probably doesn't worth the time implementing. You should also consider extending from PureComponent rather than Component.

The question is, now there is no added optimization to functional components. So (lets disregard the "hack" in medium which might be awesome), you're saying that none stateless components are preferable to stateless - performance-wise. right? — Jony-Y, Aug 21 '17 at 11:29
ok, I think I got the gist. so as far as the performance improvement its negligible for simple components. — Jony-Y, Aug 21 '17 at 13:21

Component with shouldComponentUpdate vs stateless Component. Performance?

1 Answers1