Hooks

useTimeout

import React from 'react';

export default function useTimeout(callback, delay) {
  const timeoutRef = React.useRef(null);
  const savedCallback = React.useRef(callback);
  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  React.useEffect(() => {
    const tick = () => savedCallback.current();
    if (typeof delay === 'number') {
      timeoutRef.current = window.setTimeout(tick, delay);
      return () => window.clearTimeout(timeoutRef.current);
    }
  }, [delay]);
  return timeoutRef;
};

Uso:

function App() {
  const [hasTimeElapsed, setHasTimeElapsed] = React.useState(false);
  useTimeout(() => {
    setHasTimeElapsed(true);
  }, 5000);
  return (
    <p>
      {hasTimeElapsed
        ? '5 seconds has passed!'
        : 'The timer is running…'}
    </p>
  )
}

Usar useRef en lugar de useState

Para evitar re-renders en el componente es una buena alternativa usar useRef cómo en este ejemplo creando un componente input:

const CustomInput: React.FC = () => {
  const [text, setText] = useState<string>()

  return (
    <input
      value={text}
      onChange={e => setValue(e.target.value)}
      type={text}
    />
  )
}

En este ejemplo, cada pulsación de tecla se volverá a renderizar debido al cambio de estado con el evento onChange.

const CustomInput: React.FC = () => {
  const inputElementRef = useRef(null);
  console.log(inputElementRef?.current?.value);

  return (
    <input ref={inputElementRef} type="text" />
  );
}

En este ejemplo, lo que se escribe en la entrada se puede leer usando la referencia de entrada. Este enfoque evita la re-renderización innece saria en cada pulsación de tecla.