Answers by Sentry

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();

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

<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:

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.

Get Started With Sentry

Get actionable, code-level insights to resolve React performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a React project and note your DSN

  3. Grab the Sentry React SDK

  npm install @sentry/react
  1. Configure your DSN
  import React from "react";
  import ReactDOM from "react-dom";
  import * as Sentry from "@sentry/react";
  import App from "./App";

  Sentry.init({
    dsn: "https://<key>@sentry.io/<project>"
  });

  ReactDOM.render(<App />, document.getElementById("root"));

Check our documentation for the latest instructions.

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
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.