This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

When you want the component to “remember” some information, but you don’t want that information to trigger a rerender, you can use the ref, which is like a secret “pocket” for storing information in the component.

At the back of the article is mainly through some example verifies the understanding of ref, actually react the official blog can perform debugging, this paper is to analyze, can control the look: beta.reactjs.org/learn/refer…

series

  • 1. Use useRef
  • (2) The useRef example
  • (3) compare ref and state
  • (4) The principle of useRef
  • UseRef is easy to understand and parse (5) ref best practices
  • UseRef is easy to parse (vi) ref summary
  • Have you learned? Try these challenges – fix broken chat input boxes
  • Have you learned? Try these challenges – fixing components that can’t be rerendered
  • Have you learned? Try these challenges – fix to jitter

Read the latest status

Challenge 4: Read the latest status

In this case, after you press “send,” there is a small delay before the prompt message is displayed. Type “Hello,” press Send, and quickly edit the input again before the prompt comes out. Even if you edit it, the prompt will say “Hello” (which is the status value when the button is clicked).

In general, this behavior is what you want in your application. However, sometimes you might want some asynchronous code to read the latest version of some state. Can you think of a way to make prompts display the text currently typed, rather than the text when clicked?

import { useState, useRef } from 'react';

export default function Chat() {
  const [text, setText] = useState(' ');

  function handleSend() {
    setTimeout(() = > {
      alert('Sending: ' + text);
    }, 3000);
  }

  return (
    <>
      <input
        value={text}
        onChange={e= > setText(e.target.value)}
      />
      <button
        onClick={handleSend}>
        Send
      </button>
    </>
  );
}
Copy the code

3

2

1

State works like a snapshot, so you can’t read the latest state from an asynchronous operation such as a timeout. However, you can keep the latest input text in ref. Ref is a mutable pure object, so you can read its current property at any time, and since the current text is also used to render in the input box, in this case you will need a state (for rendering) and a ref (to read it when timeout). You need to manually update the current ref value.

import { useState, useRef } from 'react';

export default function Chat() {
  const [text, setText] = useState(' ');
  const textRef = useRef(text);  / / here

  function handleChange(e) {
    setText(e.target.value);
    textRef.current = e.target.value;  / / here
  }

  function handleSend() {
    setTimeout(() = > {
      alert('Sending: ' + textRef.current); / / here
    }, 3000);
  }

  return (
    <>
      <input
        value={text}
        onChange={handleChange}
      />
      <button
        onClick={handleSend}>
        Send
      </button>
    </>
  );
}
Copy the code