Comprendiendo los Hooks de React

Alice Johnson 15 de junio de 2023

Tabla de Contenido

1. Comprendiendo los Hooks de React
2. useState Hook
3. useEffect Hook
4. Custom Hooks

Comprendiendo los Hooks de React

Los Hooks de React son una característica que te permite usar el estado y otras características de React en componentes funcionales. Esto te permite escribir componentes más simples y reutilizables sin tener que convertirlos en clases.

useState Hook

El useState hook te permite añadir estado a tus componentes funcionales.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect Hook

El useEffect hook te permite realizar efectos secundarios en tus componentes funcionales, como acceder a datos externos o modificar el DOM.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Custom Hooks

Puedes crear tus propios hooks personalizados para reutilizar lógica en tus componentes.

import { useState } from 'react';

function useCounter(initialCount) {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

Luego puedes usar tu hook personalizado en tus componentes.

import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment } = useCounter(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

Los Hooks de React son una poderosa característica que te permite escribir componentes más limpios y reutilizables en React. ¡Empieza a usarlos en tus proyectos hoy mismo!