Optimizing High-Frequency Inputs with Uncontrolled Components

Snippet

Optimizing High-Frequency Inputs with Uncontrolled Components

For inputs that trigger frequent updates, uncontrolled components using refs can be more performant than controlled state, as they avoid re-rendering the component on every keystroke.

snippet.js

javascript

import { useRef } from 'react';
 
function FastSearch() {
  const inputRef = useRef(null);
 
  const onSearch = () => {
    const value = inputRef.current.value;
    console.log('Searching for:', value);
  };
 
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onSearch}>Search</button>
    </>
  );
}

react

Breakdown

const value = inputRef.current.value;

Directly accesses the DOM element's value without triggering a React state update cycle.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Optimizing High-Frequency Inputs with Uncontrolled Components

Related