DEV Community

Keertivaas S
Keertivaas S

Posted on

React useRef is easy!

We can use useRef instead of the usual way (event.target.value) to fetch an input value, in a much easier hassle free way. This example below can make you familiar with useRef, enabling you to sue it for more difficult scenarios:

const unameRef = React.useRef(); //declaration

const [userName, setUserName] = React.useState(''); // I have a sample variable to set username to

// Usage - React element

// A simple usage with useEffect to set focus to a form field

useEffect(() => {
unameRef.current.focus();
}, []);

// handleChange function

function handleChange(event){
setUserName(unameRef.current.value);
}

Top comments (0)