Digamos que tengo un componente de entrada controlado simple en React.
const ControlledInput = () => { const [state, setState] = React.useState(""); const handleInputChange = (e) => { setState(e.target.value); }; return <input type="text" value={state} onChange={handleInputChange} /> };Entonces, en este ejemplo simple, el componente se volverá a representar con cada carácter ingresado por el usuario. ¿Cuál es la mejor experiencia que se usa para retrasar la re-renderización? Me refiero a que el usuario escriba en la entrada la palabra "Soy un usuario" y queremos que se vuelva a procesar cuando el usuario deje de ingresar caracteres o tal vez después de 3 segundos cuando el usuario comenzó a escribir.
Uso SetTimeout para retrasar una nueva representación, aquí hay un ejemplo de código
import React, { useState, useEffect } from 'react'; type Props = { children: React.ReactElement; waitBeforeShow?: number; }; const Delayed = ({ children, waitBeforeShow = 500 }: Props) => { const [isShown, setIsShown] = useState(false); useEffect(() => { console.log(waitBeforeShow); setTimeout(() => { setIsShown(true); }, waitBeforeShow); }, [waitBeforeShow]); return isShown ? children : null; }; export default Delayed;Y
export function LoadingScreen = ({ children }: Props) => { return ( <Delayed> <div /> </Delayed> ); };La mejor manera, en este caso, sería usar el método setTimeout() para agregar algo de retraso a la representación de componentes o llamadas API.
Nota: En el ejemplo compartido a continuación, no debe usar la inputValue que controlo con algún retraso, su único propósito es evitar el rebote de la escritura.
Esto es lo que tendrá que usar setTimeout() de manera que se borre cada vez que el usuario ingrese algo y para eso, deberá guardar la referencia de setTimeout() usando el siguiente fragmento
var timoutId = setTimeout(cb,timeout); Después de esto, puede borrar el tiempo de espera llamando a este clearTimeout(timeoutId)
He creado una breve demostración que vale la pena ver: demostración de Sandbox
Aquí está el fragmento final que se usa en el sandbox mencionado anteriormente:
import React, { useState, useCallback } from "react"; import "./styles.css"; export default function App() { // for preserving input value with delay const [inputValue, setValue] = useState(""); // to maintain the timeout ref let intervalId = React.useRef(); // handle input change with delay const handleChange = useCallback((e) => { // input box value const value = e.target.value; console.log(value, "value"); // clear the existing timout clearTimeout(intervalId.current); // reassign new timout ref intervalId.current = setTimeout(() => { setValue(value); console.log("I'm inside the setTimeout callback function!"); }, 3000); }, []); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <input onChange={handleChange} /> <p>{inputValue}</p> </div> ); }