Comprendiendo los Hooks de React

Alice Johnson 15 de junio de 2023

Tabla de contenidos

1. 1 - Comprendiendo los Hooks de React
2. 2 - useState Hook
3. 3 - useEffect Hook
4. 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!