CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-stateuse-ref
Pinak faldu
Pinak faldu

Reputation: 89

using useRef in input to avoid re render in appication

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

This is how we usually do it but this will re-render the entire component 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?

Upvotes: 3

Views: 5748

Answers (3)

Sharmin
Sharmin

Reputation: 21

I think the main issue in your code comes 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.

Upvotes: 0

user3349616
user3349616

Reputation: 11

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" />   
)

Upvotes: 1

Ankit Saxena
Ankit Saxena

Reputation: 1197

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>

     </>
  )
  
}

Upvotes: 3

Related Questions