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)

Answer 1

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.