Hooks
Hooks y recomendaciones que voy encontrando por la web en el día a día.
Stiven Castillo
2 min readFebruary 28, 2021
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.