I want to implement useRef so that the ponent in which my input tag is should not re-render on value change. If we use useState it will re-render the entire ponent on every key pressed.

This is how we usually do it but this will re-render the entire ponent on every change.

const [name, setName] = useState('');
return(
   <input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)} />   
)

I want to do this using useRef to avoid it

const name = useRef("");
const handleName = (e) => {
   name.current = e.target.value
 };

return(
   <input type="text" placeholder="Name" value={name.current.value} onChange={handleName} />   
)

but it's not working for some reason?

I want to implement useRef so that the ponent in which my input tag is should not re-render on value change. If we use useState it will re-render the entire ponent on every key pressed.

This is how we usually do it but this will re-render the entire ponent on every change.

const [name, setName] = useState('');
return(
   <input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)} />   
)

I want to do this using useRef to avoid it

const name = useRef("");
const handleName = (e) => {
   name.current = e.target.value
 };

return(
   <input type="text" placeholder="Name" value={name.current.value} onChange={handleName} />   
)

but it's not working for some reason?

• javascript
• reactjs
• react-hooks
• use-state
• use-ref

• Why do you want to avoid the re-render? – ollie Commented Mar 21, 2022 at 14:06
• I am learning react hooks and I think why to re-render the entire ponent if we can achieve this using useRef with re-render I think? I may be wrong! – Pinak faldu Commented Mar 21, 2022 at 14:13
• The input element takes care of re-rendering itself on every value change, you don't need to pass the updated value to it, it handles it's own state. – HedeH Commented Mar 21, 2022 at 14:41

3 Answers 3

Change your input tag to this (inside JSX):

     <input type="text" placeholder="Name" ref={name} onChange={handleName} />   

Instead of value={name.current.value} use ref={name}. It should fix the issue.

Full code :

import { useRef } from "react";

export default function App() {

  const name = useRef('');

  const handleName = (e) => {
     name.current = e.target.value
     document.getElementById('test').innerText = name.current
   };
  
  return(
    <>
     <input type="text" placeholder="Name" ref={name} onChange={handleName} />   
     <p id='test'></p>

     </>
  )
  
}

if you want to avoid rendering on change, you can just pass ref to the input element. and whenever required you can get the value from ref as used in the handleSubmit method below. Html input element will maintain its state:

    const nameRef = useRef(null);
const handleSubmit = () => {
  console.log(nameRef.current.value);
};

return(
   <input type="text" ref={nameRef}  placeholder="Name" />   
)

I think the main issue in your code es from:

const name = useRef("");

The value of name here is an empty string, and can not be used to refer to a DOM element. Then applying name.current.value doesn't work as you might expect. Using const name = useRef() will enable us to refer to the input element by assigning name to the input's ref attribute.

Having said that, I would suggest modifying your code as follows:

const name = useRef();
const handleName = (e) => {
   name.current.value = e.target.value
 };

return(
   <input type="text" placeholder="Name" ref={name} onChange={handleName} />   
)

Update: Other approaches for optimizing re-rendering on every keystroke can be found here.