Ejercicios - Hooks en React

Ejercicios - Uso de Hooks en React

useState - Contador simple

Hook que permite manejar estados en componentes funcionales.

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

useEffect - Efecto secundario

Hook que ejecuta funciones después de renderizar el componente.

import React, { useEffect } from 'react';

function Efecto() {
  useEffect(() => {
    console.log('Componente montado');
  }, []);

  return <p>Mira la consola del navegador</p>;
}

useRef - Referencia a un input

Hook que mantiene valores mutables sin causar re-renderizados.

import React, { useRef } from 'react';

function Referencia() {
  const inputRef = useRef();

  const enfocar = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={enfocar}>Enfocar</button>
    </div>
  );
}

useContext - Contexto global

Hook que accede a valores globales definidos con React Context.

const UsuarioContext = React.createContext();

function MostrarUsuario() {
  const usuario = React.useContext(UsuarioContext);
  return <div>Usuario: {usuario}</div>;
}

← Volver