UseRef 存储以前的值，但 useRef 的计数器使用当前值

Question

I have one doubt regarding the useRef functionality. We know useEffect will update the value after render and useRef does not cause re-renders. So, value is updated one cycle late and so when we try to display any value in DOM useRef variable, it shows previous value and this becomes a major use case for useRef but then how does update count works fine and shows current value and not one cycle late?

import React from "react";
import "./App.css";
import { useEffect, useState, useRef } from "react";

function App(){

const count = useRef(0);
const text = useRef("");
const [inputValue, setInputValue] = useState("");

useEffect(() => {
    text.current = inputValue;
    count.current = count.current + 1;
});

return (
    <>
      <input type="text" value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
      <h1>Render Count: {count.current}</h1> //displays 1 after re-rende
      <h1>{text.current}</h1> //displays "" after re-render
    </>
  );
}

The count variable runs with current value and not one cycle late. Which means after I type a letter "A" in textbox, count.current becomes 1 from 0 and displays 1 but text.current displays previous value ie "" and not "A. Why?

The count should have also run 1 cycle later and should have displayed 1 after 2nd re-render instead of 1st re-render.

Answer 1

Because when the component isMounted at the first rendering, the value of counter.current becomes 1 , but the value of text.current is still "" . If you want to make them synchronized do not increase the value of counter.current at the first calling of useEffect callback, cause there is not any changes occured in the input field at that time.

Define a useRef controlling whether the component isMounted or isUpdated like this:

const isMounted = useRef(false); 

And then change the useEffect callback:

useEffect(() => {
  if(isMounted.current){
    text.current = inputValue;
    count.current = count.current + 1;
  }
  else{
    isMounted.current = true;
  }
});

This time you can see, both of counter.current and text.current are one behind the current changes and they are synchronized together.

By the way always track an input changes with state hook not ref hook .

Answer 2

I think the root core is two things below:

1. Firstly, useEffect hook is triggered after rendering or re-rendering so the code in useEffect hook will be updated later
2. text.current = inputValue means it has reference to inputValue , so when inputValue has latest value, text.current has the new value at the same time. This process happens in onChange event and before useEffect .

It leads to text.current has latest value, count.current hasn't