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
Impresionante Elemento de Tecnología 1
Esta es una descripción detallada para el impresionante elemento de tecnología número 1.
Excepcional Elemento de Música 2
Esta es una descripción detallada para el excepcional elemento de música número 2.
Fantástico Elemento de Comida 3
Esta es una descripción detallada para el fantástico elemento de comida número 3.
Extraordinario Elemento de Deportes 4
Esta es una descripción detallada para el extraordinario elemento de deportes número 4.
Maravilloso Elemento de Deportes 5
Esta es una descripción detallada para el maravilloso elemento de deportes número 5.
Notable Elemento de Libros 6
Esta es una descripción detallada para el notable elemento de libros número 6.
Fantástico Elemento de Libros 7
Esta es una descripción detallada para el fantástico elemento de libros número 7.
Extraordinario Elemento de Ciencia 8
Esta es una descripción detallada para el extraordinario elemento de ciencia número 8.
Excepcional Elemento de Tecnología 9
Esta es una descripción detallada para el excepcional elemento de tecnología número 9.
Excepcional Elemento de Comida 10
Esta es una descripción detallada para el excepcional elemento de comida número 10.
Brillante Elemento de Viajes 11
Esta es una descripción detallada para el brillante elemento de viajes número 11.
Excepcional Elemento de Música 12
Esta es una descripción detallada para el excepcional elemento de música número 12.
Maravilloso Elemento de Música 13
Esta es una descripción detallada para el maravilloso elemento de música número 13.
Maravilloso Elemento de Comida 14
Esta es una descripción detallada para el maravilloso elemento de comida número 14.
Excepcional Elemento de Ciencia 15
Esta es una descripción detallada para el excepcional elemento de ciencia número 15.
Increíble Elemento de Música 16
Esta es una descripción detallada para el increíble elemento de música número 16.
Brillante Elemento de Tecnología 17
Esta es una descripción detallada para el brillante elemento de tecnología número 17.
Excepcional Elemento de Música 18
Esta es una descripción detallada para el excepcional elemento de música número 18.
Excepcional Elemento de Arte 19
Esta es una descripción detallada para el excepcional elemento de arte número 19.
Maravilloso Elemento de Tecnología 20
Esta es una descripción detallada para el maravilloso 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