Avoid re-rendering by using uncontrolled inputs

Lazar Nikolov

The Problem

When handling form input, the first thing that comes to your mind is using the useState hook to hold the form values. The useState hook is a great way to handle form input, but it comes with a downside. Every time the state changes, the component re-renders. This is not a problem when you have a small form, but when you have a large form with many input fields, or you don’t neccessarily need to re-render the UI, this can be a performance issue.

The Solution

The solution is to use the useRef hook instead of useState. The useRef hook is a great way to store a mutable value that doesn’t trigger a re-render. The useRef hook returns an object with a current property, which is mutable and can hold any value.

const inputRef = useRef();
Click to Copy

With this we’ve created a ref that we can assign to an input field.

<input type="text" ref={inputRef} placeholder="Enter your name" />
Click to Copy

If you notice, the value and onChange props are missing from the input field. These inputs are called uncontrolled inputs.

To obtain the values from the input field, we can use the current property of the ref whenever we need it, for example in the form handler method:

const handleSubmit = () => {
  const name = inputRef.current.value;

  console.log(name); // the value of the input field
};
Click to Copy

We can do the same for all of the input fields in the form. This way we can avoid re-rendering the component when the state changes, and we can also avoid using the onChange event handler for each input field.