In this section, we will talk about such an extremely important element of the application at the present time as the state. React gives us the ability to work with the state of a component. A child component can learn about a change in the parent's state via
props. But what if the components do not have a common ancestor? The application constantly receives and sends data to the server, how many components can know about it? Is it possible to store application data in some centralized repository so that the desired components can access it? These and many similar questions are not unfounded. They require serious consideration, as they inevitably arise as the application grows.
Hooks are new in React 16.8 that allow you to use state and other React features without writing classes. These are functions with which you can hook into React state and lifecycle methods from functional components.
Hooks don't work inside classes - they give you the ability to use React without classes.
useState - State hook 📌
The first hook we'll look at is the
In this example,
useState is a hook. We call it to endow our functional component with internal state. React will keep this state between renders. The call to
useState returns an array with two elements, which contains: the current value of the state (getter) and a function to update it (setter). This function can be used anywhere, for example, in an event handler.
The only argument to useState is the initial state. In the example above, this is
0, since our counter starts at zero. The original argument value is used only on the first render.
useEffect - Effect hook ⚡️
You've most likely had the experience of querying data, subscribing, or manually modifying the DOM from a React component before. We regard these operations as "side effects" (or "effects" for short), since they can affect the operation of other components and cannot be performed at render time.
useEffect hook, you can execute side effects from a functional component.
For example, this component receives data from the server and displays it in the
FlatList component. In order to see the data in the preview, you need to select the device
Android as desired.
Only use hooks at the top level
Don't call hooks inside loops, conditionals, or nested functions. Instead, always use hooks only inside React functions, before returning any value from them. This rule ensures that the hooks are called in the same sequence each time the component is rendered. This will allow React to properly persist the hook state between multiple calls to
Only call hooks from React functions
- ✅ Call hooks from a functional React component.
- ✅ Call hooks from a custom hook. By following this rule, you can ensure that all of the component state logic is clearly visible from the source code.
To follow the rules of hooks, use the ESLint plugin
Read about how to create a custom hook yourself here
Functions with which you can hook into React state and lifecycle methods from functional components?
Hooks are an innovation in React that allows you to use state and other React features without writing c version classes:
- React 16.5
- React 16.8
- React 16.9
What is the application state hook called?
What hook can you use to execute side effects from a functional component?
Are hooks called from loops, conditionals, or nested functions?
Hooks can only be called from React functions?
Thanks goes to these wonderful people (emoji key):