Stateful functional components — React Hooks

Components are the basic building blocks of a react application. There are two types of components. The first type is the class-based components which are also known as “stateful components”, “smart components” or “containers”. The second type is the functional components (also known as “stateless components”, “dump components” or “presentational components”). One of the major drawbacks in functional components was that there was no built-in functionality to manage a state. The best practice is to have functional components as much as possible.

Class-Based components

See the example below. This example shows you how to manage the state in a class-based component. Class-based components should extend the React Component class.

Functional Components

A functional component is just a javascript function which returns a React element. Following code shows you an example of a functional component which accepts props and returns a React element.

Stateful functionality with a functional component (useState hook)

With the React Hooks update (released with the React 16.8 version), it is very easy to manage a state within a functional component. See the example below. Following example manages two states within a functional component.

If you want to learn more about React Hooks, please refer to the official React Hooks documentation. It has a lot of examples with good explanations.