4. Simple Counter Bonus

[hchocobar]

Check List

• [ ] useEffect()
• [ ] Time to Code: Project Simple Counter Bonus

useEffect()

doc: https://es.react.dev/reference/react/useEffect

• [ ] Definción: Declara un efecto con useEffect en el nivel superior de tu componente
• [ ] Sintaxis: useEffect(configuración, dependencias?)
  • [ ] configuración: La función con la lógica de tu Efecto.
  • [ ] return (opcional) que devuelve una función de limpieza con código de limpieza
  • [ ] dependencias opcionales: La lista de todos los valores reactivos referenciados dentro del código de configuración.

Time to Code: Simple Counter Bonus

Spain-50 Day 17

• [ ] Agregar estilos en index.css
• [ ] Crear un componente básico y probarlo
• [ ] Crear estado counter
• [ ] Agregar el código HTML al return
  • [ ] h1,
  • [ ] h2 con {}
  • [ ] div.big-counter
  • [ ] div*11
  • [ ] 1 div para el icono
  • [ ] 8 divs para los dígitos
  • [ ] 1 div para la coma
  • [ ] 1 div para el grupo de botones
    • [ ] boostrap - button - vetical align
    • [ ] boton principal: text y class en expresiones {} (start, pause, continue)
    • [ ] boton reset
  • [ ] Crear las funciones handle
  • [ ] Crear otros estados: isRunning, status {title, icon, titleStyle}
  • [ ] handleButton
  • [ ] handleReset
• [ ] useEffect

[hchocobar]

/* Simple Counter Bonus*/
.big-counter {
    text-align: center;
    background: black;
}

.big-counter div {
    display: inline-block;
    font-size: 60px;
    background: #161B22;
    border-radius: 5px;
    color: white;
    padding: 10px;
    margin: 3px;
}

[hchocobar]

Ejemplo simple de useEffect() con dependencias

    useEffect(() => {
        if (isRunning) {
            const newInterval = setInterval(() => {
                setCounter(counter => counter + 1);
            }, 10);

            return () => clearInterval(newInterval);
        }
    }, [isRunning]);

El return en la función dentro del hook useEffect() se utiliza para definir un 'cleanup' que es una función de limpieza que React ejecutará en dos situaciones principales:

1. Cuando el componente se desmonte (unmount): Si el componente que utiliza este useEffect() deja de estar presente en la interfaz de usuario (por ejemplo, si navegas a otra página o si dejas de renderizar ese componente), React ejecutará la función de limpieza para asegurarse de que los efectos secundarios se detengan correctamente.
2. Cada vez que alguna de las dependencias del useEffect() cambie: React ejecutará la función de limpieza antes de ejecutar de nuevo el useEffect().

En este caso específico, la función de limpieza se utiliza para detener el intervalo que se creó con setInterval() y de esta manera evitar la creación de múltiples intervalos innecesarios y para asegurarse de que el intervalo se limpie correctamente cuando ya no sea necesario

[hchocobar]