The difference between react's functional components useRef and useState

 

First look at a small case, click +1 case

The first one is written using useRef

The second one is written using useState

So what's the difference between these two

click the first button

The console prints, "This is count written with ref: 1"
but why the page still shows: 0

Difference 1: Rendering is different

useRef: A change in the value will not trigger a page re-render, and the value of useRef can remain unchanged when the component is re-rendered.

useState: A change in the value will cause the page to re-render,

Note: if useState stores object type data, it will not be rendered even if the value changes, because the reference address of the new value and the old value are still the same. If you want it to render, you need to provide a new object

Difference 2: Different methods of obtaining data

useRef:countRef.current. (retrieve data) 

useState: just get it directly

Difference 3: The data obtained are different

useRef: The data obtained is the latest value

useState: The data obtained is the old value, because useState is an asynchronous operation

Let's take a look at the demo of the difference 3

It can be seen that when I click the second button, the page is rendered, because I can see the second count value, but why does the first count also become 1?

answer:

        This also verifies difference 1: and the value of useRef can persist across component re-renders

Because I clicked button 1, the value has changed, but the page is not rendered, then I click button 2, the value of state changes, and the page is rendered, which also renders the value of count1.

Finally to sum up

When used useState, you can create and manage the state of the component. It takes an initial value as an argument and returns an array containing the current state value and a function to update the state. By calling the function that updates the state, you can update the value of the state and trigger a re-render of the component.

When used useRef, you create a mutable reference object for storing and accessing values. It returns a .currentref object containing properties that can be used to store and access values. Unlike state, useRefthe value of can persist across component re-renders.

In summary, useStateit is used to create and manage the state of components, and useRefit is used to store and access mutable values. They are commonly used hooks in React for state management in functional components.

Almost forgot, there is also a code example

import React, {useRef, useState} from 'react';

export default function App(props) {

	const countRef = useRef(0);

	const increment = () => {
		countRef.current += 1;
		console.log('这是用ref写的count:', countRef.current);
	};

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

	const incrementCount = () => {
		setCount(count + 1);
		console.log('这是用state写的count:', count);
	};

    return (
        <div>
			<h1>这是用ref写的count: {countRef.current}</h1>
			<button onClick={increment}>Increment1</button>
			<hr/>
			<h1>这是用state写的count: {count}</h1>
			<button onClick={incrementCount}>Increment2</button>
        </div>
    );
}