React Hook usage examples (6 common hooks)

1. useState: Let functional components have state

Usage example:

// Counter import { useState } from 'react'
const Test = () => {
    const [count, setCount] = useState(0);
    return (
        <>
            <h1>Clicked {count} times</h1>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </>
    );
}
export default Test

PS: in the class component, this.setState updates the state by merging it, while in useState, setState replaces it. For example:

// Error example import { useState } from 'react'
const Test = () => {
    const [counts, setCounts] = useState({
        num1: 0,
        num2: 0
    });
    return (
        <>
            <h1>num1:{counts.num1}</h1>
            <h1>num2: {counts.num2}</h1>
            <button onClick={() => setCounts({ num1: counts.num1 + 1})}>num1+1</button>
            <button onClick={() => setCounts({ num2: counts.num2 + 1})}>num2+1</button>
        </>
    );
}
export default Test

You can see that setState in useState is replaced, not merged, and updated correctly:

import { useState } from 'react'
const Test = () => {
    const [counts, setCounts] = useState({
        num1: 0,
        num2: 0
    });
    return (
        <>
            <h1>num1:{counts.num1}</h1>
            <h1>num2: {counts.num2}</h1>
            <button onClick={() => setCounts({ ...counts, num1: counts.num1 + 1})}>num1+1</button>
            <button onClick={() => setCounts({ ...counts, num2: counts.num2 + 1})}>num2+1</button>
        </>
    );
}
export default Test

2. useEffect: side effects, replacing life cycle

Usage example, in a class component, if we need to do the same thing after the component is mounted and after the data is updated, we would do this:

componentDidMount() {
    // do something }
componentDidUpdate() {
    // do something }

It can be seen that if the logic is complicated, the code will look inelegant and easily cause logical confusion, and useEffect:

useEffect(() => {
    // do something });

At this point, we have seen the basic usage of useEffect. In addition, it can also bind dependent states that trigger updates. By default, any data changes in the state will execute the side effect, such as:

import { useState, useEffect } from 'react'
const Test = () => {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);
    useEffect(() => {
        console.log('useEffect triggered')
    });
    return (
        <>
            <h1>count1:{count1}</h1>
            <h1>count2:{count2}</h1>
            <button onClick={() => setCount1(count1 + 1)}>count1+1</button>
            <button onClick={() => setCount2(count2 + 1)}>count2+1</button>
        </>
    );
}
export default Test

Pass the second parameter of useEffect in the above code to the state to be bound. You can bind multiple states:

// Syntax: useEffect(callback function, [dependency value])
useEffect(() => {
    console.log('useEffect triggered')
}, [count1]);

As you can see, it will only be triggered if the bound count1 changes. If an empty array is passed, any state changes will not be triggered. At this time, the role of useEffect is similar to componentDidMount in the class component, so sending requests is usually executed here.

Cleaning up side effects

In the above operations, there is no need to clean up the side effects. However, some side effects need to be cleaned up. Failure to clean up will cause exceptions or even memory leaks. For example, if a timer is turned on, it will be turned on multiple times if it is not cleaned up. From the above, you can see that the first parameter of useEffect is a callback function, and a function can be returned in the callback function. This function can be called before the first callback function is executed after the state is updated. The specific implementation is:

useEffect(() => {
    // Set up side effects return () => {
        // Clean up side effects }
});

3. useContext: Sharing data across components

React.createContext(); Create a TestContext object
TestContext.Provider wraps the subcomponent data in the value of <TestContext.Provider value={value}> and obtains the value through useContext(TestContext) in the subcomponent

import React, { useContext, useState } from 'react';
const TestContext = React.createContext();
const Parent = () => {
    const [value, setValue] = useState(0);
    return (
        <div>
            {(() => console.log("Parent-render"))()}
            <button onClick={() => setValue(value + 1)}>value + 1</button>
            <TestContext.Provider value={value}>
                <Child1 />
                <Child2 />
            </TestContext.Provider>
        </div>
    );
}
const Child1 = () => {
    const value = useContext(TestContext);
    return (
        <div>
            {(() => console.log('Child1-render'))()}
            <h3>Child1-value: {value}</h3>
        </div>
    );
}
const Child2 = () => {
    return (
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>Child2</h3>
        </div>
    );
}
export default Parent

So far, the data is shared, but you can see that as long as the shared data in TestContext changes, the child components will be re-rendered. Child2 is not bound to data, and you don't want it to do meaningless rendering. You can use React.memo to solve it and implement it:

const Child2 = React.memo(() => {
    return (
        <div>
            {(() => console.log('Child2-render'))()}
            <h3>Child2</h3>
        </div>
    );
});

4. useCallback: performance optimization

grammar:

// useCallback(callback function, [dependency value])
const handleClick = useCallback(()=> {
    // do something }, [value]);

useCallback returns a memoized function. When the dependencies remain unchanged, the returned value is the same when it is defined multiple times. Its implementation principle is that when a function is called for the first time with a set of parameters, the parameters and calculation results are cached. When the function is called again with the same parameters, the corresponding cached results are directly returned.

Optimizing performance examples:

import React, { useState, useCallback, memo } from 'react';
const Parent = () => {
    const [value1, setValue1] = useState(0);
    const [value2, setValue2] = useState(0);
    const handleClick1 = useCallback(()=> {
        setValue1(value1 + 1);
    }, [value1]);
    const handleClick2 = useCallback(()=> {
        setValue2(value2 + 1);
    }, [value2]);
    return (
        <>
            {(() => console.log("Parent-render"))()}
            <h3>{value1}</h3>
            <h3>{value2}</h3>
            <Child1 handleClick1={handleClick1} />
            <Child2 handleClick2={handleClick2} />
        </>
    );
}
const Child1 = memo(props => {
    return (
        <div>
            {(() => console.log("Child1-render"))()}
            <button onClick={() => props.handleClick1()}>value1 + 1</button>
        </div>
    );
});
const Child2 = memo(props => {
    return (
        <div>
            {(() => console.log("Child2-render"))()}
            <button onClick={() => props.handleClick2()}>value2 + 1</button>
        </div>
    );
});
export default Parent

useCallback returns a memoized callback function, which is changed only when one of the bound dependencies changes to prevent unnecessary rendering. The event used as an example in cross-component data sharing is triggered by a click in the parent component, but now we are using state promotion to pass methods in the parent component for the child component to call. The function will also change every time it is rendered, causing the child component to re-render. In the above example, useCallback wraps the function, and returns the cached function when the dependent value has not changed. React.memo can be used to optimize meaningless rendering.

5. useMemo: performance optimization

grammar:

// useMemo(callback function, [dependency value])
useMemo(() => {
    // do something },[value]);

Let’s look at an example:

import React, { useState } from 'react'
const Test = ()=> {
    const [value, setValue] = useState(0);
    const [count, setCount] = useState(1);
    const getDoubleCount = () => {
        console.log('getDoubleCount is calculated');
        return count * 2;
    };
    return (
        <div>
            <h2>value: {value}</h2>
            <h2>doubleCount: {getDoubleCount()}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    )
}
export default Test

You can see that getDoubleCount depends on count, but it also recalculates and renders when value changes. Now you just need to wrap getDoubleCount with useMemo, as follows:

import React, { useState, useMemo } from 'react'
const Test = ()=> {
    const [value, setValue] = useState(0);
    const [count, setCount] = useState(1);
    const getDoubleCount = useMemo(() => {
        console.log('getDoubleCount is calculated');
        return count * 2;
    },[count]);
    return (
        <div>
            <h2>value: {value}</h2>
            <h2>doubleCount: {getDoubleCount}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    )
}
export default Test

Now getDoubleCount will only recalculate and render when the dependent count changes.

What useMemo and useCallback have in common:

The received parameters are the same, the first one is the callback function, the second one is the dependent data
They all recalculate the results when the dependent data changes, which plays a caching role.

The difference between useMemo and useCallback:

The calculation result of useMemo is the returned value, which is usually used to cache the value of the calculation result
The result of useCallback calculation is a function, which is usually used for caching functions

6. Use of useRef: For example, to make the input box get the focus by clicking a button:

import React, { useState, useMemo } from 'react'
const Test = ()=> {
    const [value, setValue] = useState(0);
    const [count, setCount] = useState(1);
    const getDoubleCount = useMemo(() => {
        console.log('getDoubleCount is calculated');
        return count * 2;
    },[count]);
    return (
        <div>
            <h2>value: {value}</h2>
            <h2>doubleCount: {getDoubleCount}</h2>
            <button onClick={() => setValue(value + 1)}>value+1</button>
        </div>
    )
}
export default Test

This looks a lot like React.createRef(). Changing useRef() in the code above to React.createRef() can achieve the same effect, so why design a new hook? Is it just about adding use and unifying the hook specifications?
In fact, they are indeed different.

The official website explains as follows:

useRef returns a mutable ref object whose .current property is initialized to the passed
argument (initialValue). The returned object will persist for the full lifetime of the component.

translate:

Simply put, useRef is like a storage box. You can store anything you want. When you render again, it will go to the storage box to find it. CreateRef will return a new reference each time it renders, while useRef will return the same reference each time.

This concludes this article on the detailed usage of React Hook (6 common hooks). For more content on the usage of React Hook, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of how to use React Hooks to request data and render
React Hooks implementation and origin and detailed explanation of the problems it solves
How to unit test react hooks
Record a complete react hooks practice
How to build a project based on Webpack4 and React hooks
In-depth understanding and use of React Hooks

<<: mysql database to retrieve the statements of seconds, minutes, hours and days before and after

>>: How to simulate network packet loss and delay in Linux