Sentry Answers>React>

Avoid re-rendering by using uncontrolled inputs

Avoid re-rendering by using uncontrolled inputs

Lazar Nikolov

—

The ProblemJump To Solution

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.

Click to Copy
const inputRef = useRef();

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

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

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:

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

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

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.

  • Syntax.fmReact Server Components
  • Sentry BlogFixing memoization-breaking re-renders in React
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.