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.

I think you're trying to compare stateless functional components vs. class-based components, "container components" is an overloaded term. See e.g. https://stackoverflow.com/q/36097965/3001761 — jonrsharpe, May 06 '19 at 09:40
Yes @jonrsharpe that is exactly what I am trying to do. May you please still answer my question? Thanks! — Rishav, May 06 '19 at 09:45
One React pattern is to separate function from presentation, meaning you use a container component that manages state, and a UI component that simply renders the state. Every component used to be class-based, and UI components are simply the perfect use-case for the newer functional components. — , May 06 '19 at 09:46

Nikos M. · Accepted Answer · 2019-05-13T10:54:40.040

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:

Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks

You end up with less code

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

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)

Thank you. That clears it. I understand why I would need both of them. Although is there a difference when it comes to performance? `The React team mentioned that there may be a performance boost for functional component in future React versions` but is there really any as of now? — Rishav, May 06 '19 at 10:33
There are performance issues with functional components (for example from purely javascript perspective, not needing to extend another class, no methods and so on.) React boost for purely functional components is the next logical thing to do, since no lifecycle hooks nor state managements has to be made. Not sure what are the advantages though as they depend on the React team itself — Nikos M., May 06 '19 at 10:38

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

1 Answers1