diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index da5d864abaf..c48bf7a5ec1 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -616,33 +616,26 @@ export default function Chat() { -State works [like a snapshot](/learn/state-as-a-snapshot), so you can't read the latest state from an asynchronous operation like a timeout. However, you can keep the latest input text in a ref. A ref is mutable, so you can read the `current` property at any time. Since the current text is also used for rendering, in this example, you will need *both* a state variable (for rendering), *and* a ref (to read it in the timeout). You will need to update the current ref value manually. +State works [like a snapshot](/learn/state-as-a-snapshot), so you can't read the latest state from an asynchronous operation like a timeout. However, you can keep the input in a ref. Instead of storing the value in state you are simply reading the native value of the input. This is called an [uncontrolled component](). ```js -import { useState, useRef } from 'react'; +import { useRef } from 'react'; export default function Chat() { - const [text, setText] = useState(''); - const textRef = useRef(text); - - function handleChange(e) { - setText(e.target.value); - textRef.current = e.target.value; - } + const textRef = useRef(null); function handleSend() { setTimeout(() => { - alert('Sending: ' + textRef.current); + alert('Sending: ' + textRef.current.value); }, 3000); } return ( <>