Ahora que el componente tiene todo listo para crear el efecto secundario de resaltar, todo lo que se necesita es llamar a la función setUpdate cuando el texto prop ha sido cambiado. La forma de hacer esto en el API de los ganchos es usando el gancho de efectos.
El gancho de efectos puede funcionar después de cada renderización, sólo en el montaje y desmontaje, o cuando se han cambiado los valores especificados. Requiere dos parámetros: el primero es la función a ejecutar y el segundo es un conjunto opcional de variables que, cuando se cambie, desencadenará la ejecución de la función.
Si se llama el gancho sin un segundo parámetro, entonces la función será llamada cada vez que el componente se actualice de esta manera:
1React.useEffect(()=;{consola.log("componente actualizado");});javascript
Este componente requerirá dos ganchos de efecto. El primero se llamará sólo cuando el puntal de texto haya sido actualizado y comprobará si no hay ningún resaltado en curso y, si no, llamará a la función setUpdate definida en la sección anterior:
12345React.useEffect(()=.updateTimer.current){setUpdate();}},[text]);javascript
El segundo gancho de efecto que requiere este componente es uno para limpiar la referencia del temporizador cuando el componente se desmonta. Esto puede lograrse pasando un array vacío como segundo parámetro y devolviendo una función que será llamada cuando el componente se desmonte. El código para esto parece ser:
1234567React.useEffect(()=;{retorno()=;{if(updateTimer.current){clearTimeout(updateTimer.current);}};},[]);javascript
Añade estas dos llamadas a useEffect en la función Label y el color de fondo se resaltará por un segundo cada vez que cambie el texto.