Sentry Answers>React>

Avoid re-rendering by using uncontrolled inputs

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.

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.

  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • 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. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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.