Hook useDeferredValue

Difiere cálculos costosos para mantener tu UI responsiva

¿Qué es useDeferredValue?
useDeferredValue te permite diferir la actualización de una parte de la UI. Acepta un valor y devuelve una nueva copia del valor que se diferirá a actualizaciones más urgentes.

Cómo funciona:

  • Durante el renderizado inicial, el valor diferido es igual al valor proporcionado
  • Durante las actualizaciones, React primero re-renderiza con el valor anterior
  • Luego programa otro renderizado con el nuevo valor en segundo plano
  • Si el valor cambia de nuevo, React abandona el renderizado en segundo plano

Mejores Casos de Uso:

  • Entrada de búsqueda con operaciones de filtrado costosas
  • Listas grandes que son costosas de renderizar
  • Gráficos o visualizaciones con cálculos complejos
  • Cualquier UI que dependa de valores que cambian frecuentemente
Ejemplo 1: Búsqueda con Filtrado
Busca a través de un conjunto de datos grande sin bloquear la entrada
Se encontraron 50 resultados
Maravilloso Elemento de Deportes 1
Esta es una descripción detallada para el maravilloso elemento de deportes número 1.
Excepcional Elemento de Comida 2
Esta es una descripción detallada para el excepcional elemento de comida número 2.
Fantástico Elemento de Arte 3
Esta es una descripción detallada para el fantástico elemento de arte número 3.
Brillante Elemento de Comida 4
Esta es una descripción detallada para el brillante elemento de comida número 4.
Notable Elemento de Viajes 5
Esta es una descripción detallada para el notable elemento de viajes número 5.
Notable Elemento de Deportes 6
Esta es una descripción detallada para el notable elemento de deportes número 6.
Excepcional Elemento de Tecnología 7
Esta es una descripción detallada para el excepcional elemento de tecnología número 7.
Fantástico Elemento de Viajes 8
Esta es una descripción detallada para el fantástico elemento de viajes número 8.
Notable Elemento de Ciencia 9
Esta es una descripción detallada para el notable elemento de ciencia número 9.
Maravilloso Elemento de Comida 10
Esta es una descripción detallada para el maravilloso elemento de comida número 10.
Impresionante Elemento de Viajes 11
Esta es una descripción detallada para el impresionante elemento de viajes número 11.
Fantástico Elemento de Libros 12
Esta es una descripción detallada para el fantástico elemento de libros número 12.
Excepcional Elemento de Arte 13
Esta es una descripción detallada para el excepcional elemento de arte número 13.
Fantástico Elemento de Ciencia 14
Esta es una descripción detallada para el fantástico elemento de ciencia número 14.
Maravilloso Elemento de Deportes 15
Esta es una descripción detallada para el maravilloso elemento de deportes número 15.
Excepcional Elemento de Ciencia 16
Esta es una descripción detallada para el excepcional elemento de ciencia número 16.
Notable Elemento de Música 17
Esta es una descripción detallada para el notable elemento de música número 17.
Brillante Elemento de Viajes 18
Esta es una descripción detallada para el brillante elemento de viajes número 18.
Notable Elemento de Comida 19
Esta es una descripción detallada para el notable elemento de comida número 19.
Excepcional Elemento de Tecnología 20
Esta es una descripción detallada para el excepcional elemento de tecnología número 20.
Y 30 resultados más...
Ejemplo 2: Renderizado de Lista Costosa
Renderiza una lista grande manteniendo el deslizador responsivo
Renderizando 100 elementos
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
Implementación del Código
'use client'

import { useDeferredValue, useState, useMemo } from 'react'

function ResultadosBusqueda({ consulta }: { consulta: string }) {
  const consultaDiferida = useDeferredValue(consulta)
  
  const resultados = useMemo(() => {
    // Operación de filtrado costosa
    return elementos.filter(elemento => 
      elemento.nombre.toLowerCase().includes(consultaDiferida.toLowerCase())
    )
  }, [consultaDiferida])
  
  return (
    <div>
      {resultados.map(elemento => (
        <div key={elemento.id}>{elemento.nombre}</div>
      ))}
    </div>
  )
}

export default function DemoBusqueda() {
  const [consulta, setConsulta] = useState('')
  
  return (
    <div>
      <input 
        value={consulta}
        onChange={(e) => setConsulta(e.target.value)}
        placeholder="Buscar..."
      />
      <ResultadosBusqueda consulta={consulta} />
    </div>
  )
}
Built with v0