Snippet

Optimierung von hochfrequenten Eingaben mit Uncontrolled Components

Für Eingaben, die häufige Updates auslösen, können Uncontrolled Components unter Verwendung von Refs performanter sein als ein gesteuerter Status, da sie ein Re-Rendering der Komponente bei jedem Tastendruck vermeiden.

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

Erklärung

const value = inputRef.current.value;

Greift direkt auf den Wert des DOM-Elements zu, ohne einen React-Status-Update-Zyklus auszulösen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Optimierung von hochfrequenten Eingaben mit Uncontrolled Components

Verwandt