Why use stateless functional Components instead of class-based Components?

Question

I am learning ReactJS and I've learned that there are UI Components and Container Components. The Container Components are implemented using classes extending React.Component and contain state and good old render method, whereas the UI Components are created using functions and they are concerned with UI only as they only take the data from props.

Sample stateless functional components:

const Ninjas = (props) => {
    const { ninjas } = props;

    const ninjalist = ninjas.map((x) => {
        var divStyle = {
            color: getRandomColor(),
        };

        return (
            <div className="ninja" key={x.key} style={divStyle}>
                <p>Name: {x.name}</p>
                <p>Age: {x.age}</p>
                <p>Belt: {x.belt}</p>
            </div>
        );
    });
    return <div className="ninja-list">{ninjalist}</div>;
};

export default Ninjas;

The same sample as a Container Component

export default class Ninjas extends Component {
    getRandomColor = () => {
        ....
        return color;
    };

    render() {
        const { ninjas } = this.props;

        const ninjalist = ninjas.map((x) => {
            var divStyle = {
                color: this.getRandomColor(),
            };

            return (
                <div className="ninja" key={x.key} style={divStyle}>
                    <p>Name: {x.name}</p>
                    <p>Age: {x.age}</p>
                    <p>Belt: {x.belt}</p>
                </div>
            );
        });
        return <div className="ninja-list">{ninjalist}</div>;
    }
}

So my question is why do we even bother to make a UI component (not using the render method which is used in Container Component) when we could have easily done the same thing as a Container Component.

Answer 1

Functional state-less components (what wrongly you refer as UI Components, all components are UI components both statefull and stateless) are simply a short-hand method to create components that simply render something based on props passed and do not need to keep internal state.

Of course one can always use class-based components which extend React.Component. But why not have a short-hand to save time and space and simplify things if we can. There is nothing forcing you to create functional components, you can always use class-based components, only if you need to simplify and save time and space.

According to Functional vs Class-Components in React article:

So why should I use functional components at all?

You might ask yourself why you should use functional components at all, if they remove so many nice features. But there are some benefits you get by using functional components in React:

1. Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
2. You end up with less code
3. They help you to use best practices. It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component
4. The React team mentioned that there may be a performance boost for functional component in future React versions

I would add a 5th point that React references (with React 16.3+) which provide functionality to access the DOM nodes directly cannot be used with Functional Components.

In React v.16.8+ useState hooks are introduced which enable functional components to be state-full while still being functional.

Furthermore with the introduction of React.memo higher-order component we can use memoization to avoid re-rendering of a functional component given that it renders same stuff for same props (shallow tested for difference)