Using ES6 class for stateful vs pure functional components

While building UI with React components, composing the views with more stateless functional components can make the frontend code manageable, clean, and easier to test. But some components will need the state or lifecycle hooks to be more than pure presentational components. In this section, we look at what it takes to build stateful and stateless functional React components, when to use one or the other and how often.

React components with ES6 class

React components defined using ES6 class have access to lifecycle methods, the this keyword, and can manage state with setState when building stateful components. Stateful components allow us to build interactive components that can manage changing data in state, and propagate any business logic that needs to be applied across the UI. Generally, for complex UI, stateful components should be higher-level container components that manage the state of the smaller stateless functional components...