The state is an instance of the React component class, which can be defined as an object that governs how a component renders and behaves. Simply put, the state of a component allows it to be dynamic and interactive, controlling its behavior.

Whenever the state is changed ➡️ Interface automatically updates

You declaratively update the interface by updating the underlying state

State in Class Components?

When using class components, state management is a built-in feature. This means you can create and manage state variables directly within the class component, without the requirement of any extra tool.
First, you need to declare and initialise state properties. This can be done in the constructor method of the class component, or if the create-react-app–based workflow is used, the state object can be declared using the class field declaration syntax.

Note: The state is local and private to a component and is not accessible outside the component. However, a component’s state can be shared with another component using props. 

Class components offer built-in state management and, thus, are a natural choice. On the other hand, function components are inherently stateless. They accept data using props and do not offer state management or lifecycle methods.

Functional Stateless Component
A stateless function component is a standard JavaScript function that receives input as a single prop argument and returns a React element to render. 
(props) => JSX 
The input shapes the rendered output but only if it is available in the form of props.
 

Hook
A hook is a special function that allows you to “hook” React features, that is, use state and other React features without writing a class. Similarly, useState is a hook that lets you add the React state to the function components.