[React] About React Hooks.

November 5, 2022

What are React hooks?

Simply put, React hooks are a set of functions that allow you to use state and Life Cycle from function components.

It attracted attention because it allowed functional components to manage state and lifecycle.

This is how React hooks were created.

This may be a little hard to visualize, so let’s go a little further into the history of how React Hooks came about.

React components include:

Class Components
Function Components

There are two types of components: class components, which existed originally, and function components, which were added later.

For this reason, function components require less writing and have a simpler structure. However, they have the following disadvantages:

"Functional components don't allow for state or lifecycle management"

There was a fatal weakness.

Therefore,

State management and lifecycle management → Class components

Stateless → Function Components

This is how they divided their habitats.

However, it would be useful if we could manage state and lifecycles even with function components. That's why React Hooks was developed.

What can you do with React Hooks?

What exactly are these functions? There are 10 built-in Hooks provided directly by React, and custom Hooks that you can create yourself .

Built-in Hooks are known as basic Hooks that are frequently used.

useState
useEffect
useContext

and some additional, less commonly used hooks known as

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

exists.

By the way, when creating your own custom Hooks, it is recommended to name them like "useXxxxx" to match the names of the built-in Hooks.

Today we will focus on two basic types of built-in Hooks:

State management with React Hooks useState

As mentioned above, useState allows you to manage state on function components.

How to use

const [count, setCount] = useState(0);

Status → count
Function to update state → setCount
Set initial value → useState(0)

It is composed of:

The flow is to set the initial value of the state count with useState(0), and then update the state count to 1 with setCount(1).

Lifecycle management with React Hooks useEffect

useEffect is a function that allows you to do simple lifecycle management within a function component. In terms of content, it can be used as a function similar to componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

useEffect( ( ) => {
//Write the process you want to execute here
}, [ ] ));

It is written like this.

In addition to the action you want to execute, you can also specify an array of dependent variables in the final [ ], so that the action will only be executed if certain variables change.

Some things to note about React Hooks.

One final note: make sure you use Hooks only at the top level, not inside loops, conditionals or nested functions, and make sure they precede any return statements.

Therefore

if (condition) {
Using useEffect
}

Instead,

useEffect( ( ) => {
if (condition) { process according to condition }
}, [ ] ));

This is the way to write it. It is also mentioned in the official React documentation below, so you can also refer to it for more details.

https://ja.reactjs.org/docs/hooks-rules.html