Componentes Funcionales y Hooks en React

React ha revolucionado la manera en que desarrollamos interfaces de usuario. Uno de los cambios más significativos en las versiones recientes es el uso de componentes funcionales y hooks. Estos elementos han simplificado y potenciado el desarrollo de aplicaciones en React, permitiendo escribir código más limpio y eficiente. En este post, exploraremos cómo utilizar componentes funcionales y hooks en React, y proporcionaremos ejemplos prácticos para ilustrar su uso.

Componentes Funcionales

Los componentes funcionales son funciones de JavaScript que retornan elementos de React. Son más simples y ligeros que los componentes de clase y permiten un desarrollo más conciso.

import React from 'react';

function Welcome(props) {
  return <h1>Hola, {props.name}</h1>;
}

Hooks

Los hooks son funciones especiales que permiten “engancharse” a las características de React, como el estado y el ciclo de vida de los componentes. Los hooks más comunes son useState y useEffect.

useState

El hook useState permite añadir estado a un componente funcional.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Haz clic
      </button>
    </div>
  );
}

useEffect

El hook useEffect permite realizar efectos secundarios en componentes funcionales, como la obtención de datos o la manipulación del DOM.

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

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

  useEffect(() => {
    document.title = `Has hecho clic ${count} veces`;
  }, [count]);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Haz clic
      </button>
    </div>
  );
}

Ejemplo Completo

A continuación, un ejemplo completo que combina useState y useEffect en un componente funcional.

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

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

  useEffect(() => {
    document.title = `Has hecho clic ${count} veces`;
  }, [count]);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Haz clic
      </button>
    </div>
  );
}

export default App;

Conclusión

Los componentes funcionales y hooks han simplificado considerablemente el desarrollo con React. Permiten escribir código más claro y conciso, facilitando la reutilización y mantenimiento de componentes. Integrar estos elementos en tus proyectos de React te permitirá aprovechar al máximo las capacidades del framework y mejorar la calidad de tu código.