Componentes funcionales en React

En el último post vimos cómo escribir un componente de clase de React, con sus métodos para controlar el ciclo de vida y algunos detalles más. En este voy a intentar explicar las bases de los componentes funcionales.

Como este articulo no incluye gestión del ciclo de vida ni estados porque esos puntos tienen un post dedicado, aprovecho para enlazarlo con el anterior artículo sobre la desestructuración.

Para empezar, lo más sencillo:

const Greeting = () => {
  return (
    <p>Hello world</p>
  )
}

Podría simplificarse incluso más (const Greeting = () => <p>Hello world</p>) pero como sabemos que vamos a ir ampliándolo no tendría mucho sentido ir a una versión tan reducida.

Cómo recibir props

Voy a poner tres ejemplos para ver las opciones más comunes: recibir el objeto props, desestructurarlo y aplicarle valores por defecto.

El único parámetro de la función es el objeto props, y es opcional.

const Greeting = (props) => {
  return (
    <p>Hello {props.name}</p>
  )
}

Normalmente sabremos los valores que vamos a recibir, así que sería una buena práctica desestructurar ya que serviría para, de alguna manera, describir qué opciones deberían estar disponibles.

const Greeting = ({ name }) => {
  return (
    <p>Hello {name}</p>
  )
}

Y cuando estamos desestructurando podemos describir valores por defecto:

const Greeting = ({ name = "Anonymous" }) => {
  return (
    <p>Hello {name}</p>
  )
}

Cuestiones importantes

Un componente funcional es básicamente esto y no necesita nada más, pero hay que tener en cuenta algunas cosas. Estos componentes no «viven» como una instancia que se mantiene en el tiempo; cada vez que hay un cambio (props o state, que veremos más adelante) se vuelve a ejecutar y todo el código se repite. Esto al principio suele dar muchos problemas de exceso de renderizados o comportamientos inesperados.

Es por eso que dependen muchísimo de los hooks. Si no te suenan no te preocupes, a partir de ahora los verás por todos lados, empezando por el próximo artículo sobre los hooks principales.

Photo by Devanshu Damle on Unsplash

Comentarios (0)

No hay comentarios. Sé el primero en comentar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.