javascript / intermediate
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
1
const value = inputRef.current.value;
Directly accesses the DOM element's value without triggering a React state update cycle.