Snippet

Verbesserung der UI-Reaktionsfähigkeit mit useDeferredValue

useDeferredValue ermöglicht es Ihnen, die Aktualisierung eines Teils der Benutzeroberfläche zu verzögern, bis dringendere Updates (wie das Tippen in einem Eingabefeld) verarbeitet wurden, um UI-Ruckler bei aufwendigen Renderings zu vermeiden.

snippet.js

javascript

import { useState, useDeferredValue } from 'react';
 
function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  return (
    <div>
      <p>Results for: {deferredQuery}</p>
      {/* Render complex list using deferredQuery */}
    </div>
  );
}

react

Erklärung

const deferredQuery = useDeferredValue(query);

Weist React an, den alten Wert sichtbar zu halten, während der neue im Hintergrund verarbeitet wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verbesserung der UI-Reaktionsfähigkeit mit useDeferredValue

Verwandt