In React, state refers to a structure that keeps track of how data changes over time in your application. In other words, state = current situation = current snapshot = status of the component.
The state
of a React class is a special property/variable (actually it is Object which acts as a container for variables and arrays) that controls the rendering of a page. When you change the state, React knows that the component is out-of-date and will automatically re-render.
For example React class:
class App extends React.Component {
render() {
}
}
If we define some variable and store data in it, react won’t know that and won’t call render() function to update
component and visually nothing changes in the frontend browser.
But if we store data in special variable called “state”, react will detect that and will call render() function again to update component and visually changes appear in the frontend browser.
When a component re-renders, it modifies the rendered output to include the most up-to-date information in state
. Managing state is a crucial skill in React because it allows you to make interactive components and dynamic web applications. State is used for everything from tracking form inputs to capturing dynamic data from an API. React hook gives access to the state property of React class.
Although the use of React Hooks is considered a more modern practice, it’s important to understand how to manage state on class-based components as well. Learning the concepts behind state management will help you navigate and troubleshoot class-based state management in existing code bases and help you decide when class-based state management is more appropriate.
https://www.digitalocean.com/community/tutorials/how-to-manage-state-on-react-class-components
React Hooks allow you to hook into the state and lifecycle of a component in functional components.
If hooks are so similar to regular functions, you might wonder why we even have the “hook” concept. The reason we need this concept is because hooks are special. They are functions that also have state that is persisted under the hood by React across calls.
A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. a function can be custom hook if the following conditions are met:
- The extracted code has no JSX output (if it does, then you should create a component instead)
- AND the extracted code includes calls to other hooks (if it doesn’t, then create a regular function instead)
https://www.robinwieruch.de/react-hooks