Preamble: This article assumes that you already have some basic understanding of React Hook. We’ll focus on what useRef is, the differences between useRef and createRef, and when to use useRef.

What is a useRef

First, we need to implement a requirement that input sets focus when button is clicked.

createRef API

Again, we can use useRef to achieve exactly the same result.

useRef Hook

React: createRef: useRef: createRef: useRef Is it just to add use, unified hook specification?

Differences between createRef and useRef

In fact, if you read the official documents carefully, they are not the same.

The definition on the official website is 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.

In other words, the useRef function in React Hook is like a variable, it’s like a box that you can store anything in. CreateRef returns a new reference every time it renders, while useRef returns the same reference every time.

If you don’t understand, that’s fine. Let’s use another example to further understand the differences between createRef and useRef.

Take a closer look at the code above. What does it output? Even if the component is re-rendered, it cannot be reassigned because the value of refFromUseRef remains (similar to this). The running results are as follows:

Reference for demo examples

When to use useRef

Why was the useRef API designed? Let’s take a look at the actual application scenario. Let’s look at a classic example.

Guess what alert pops up? Is the real-time status of count on the screen? Or is it a snapshot of count when you click a button?

Why not the real-time status of count on the screen?

The actual implementation principle is much more complex, here can be simply understood as the following ordinary function execution.

When we update the state, React will re-render the component, getting a separate count state each time, and re-render a handleAlertClick function. Each handleAlertClick has its own count inside it.

In this case, we understand the above example, the value of alert is the value of count when clicked.

How do I make the real-time count pop up when I click?

Because useRef returns the same reference every time, changes made in useEffect are also made in alert. That way, when you click, you can pop up a live count.

With the above problem solved, we move on and we want to display the value of the last count on the screen. In the code.

Get the last value, which is not much in the real world, and try to wrap it as a custom hook.

Well, this way we can easily retrieve the last value in the functional component. This way, we can simply implement the prevProps value for componentDidUpdate.

conclusion

UseRef is not just for managing DOM refs, it can store any variable, and useRef is a great way to deal with the inconvenience of closures. You can see it in various libraries, such as react-use useInterval, usePrevious… It is important to note that useRef does not notify you when its content changes. Changing the.current property does not cause a rerendering. Because he’s always been a quote.

  • Welcome to pay attention to “front-end plus plus” and share quality articles regularly

  • Reply to add group, invite you into the technical group, long-term technical exchange learning