Hooks React,UseState & useEffect

¡Bienvenid@ al mundo de React! Hoy profundizaremos en dos de los Hooks más básicos: useState y useEffect. Estos Hooks son cruciales para la gestión del estado y el manejo de efectos secundarios en las aplicaciones React.

• useState: cuando necesita realizar un seguimiento de su estado
  

¿Alguna vez te has preguntado cómo mantener eficientemente el estado de un componente? Aquí es donde entra en juego useState. Este Hook nos permite declarar variables de estado en componentes de funciones. Veámoslo a continuación:
import React, { useState } from ‘react’;
 function Contador() {
               const [count, setCount] = useState(0);
 return (
    <div>
         <p>Ha hecho click {count}veces</p>
          <button onClick={() => setCount(count + 1)}> Haz click! </button>
    </div>
  )}
export { Contador }

• useEffect: maestro de los efectos secundarios
  

¿Necesita ejecutar código en respuesta a cambios en un componente? ¡useEffect es tu aliado! Este Hook nos permite realizar operaciones secundarias, como llamadas API, actualizaciones de documentos o suscripciones a eventos. He aquí un ejemplo sencillo:

import React, { useState } from ‘react’;

 function Contador() {
               const [count, setCount] = useState(0);

    useEffect(() => {

        if (count === 5) {

            alert(‘Has alcanzado 5 clicks!’);

        }

    }, [count]);