En el mundo de React, los programadores usan distintas formas para definir sus funciones. Por ejemplo:

const Text1 = (props) => (
  <div>{props.message}</div>
);

const Text2 = ({ message }) => (
  <div>{message}</div>
);

function Text3(props) {
  return <div>{props.message}</div>
}

function Text4({ message }) {
  return <div>{message}</div>
}
Took from reddit 

¿Cuál es mejor? ¿Cuál conviene más usar?

La respuesta rápida es que las 4 son equivalentes. Sin embargo, este tipo de preguntas en Twitter siempre causan furor. Pero como dijo Dan "no importa"... al final del día esto no importa y es más bien una preferencia personal.

Lo que es importante es elegir una forma y quedarse con ella cuando construyes una aplicación. De esta forma:

  • Tu código va a ser más fácil de leer porque usa la misma convención en todas partes.
  • Te enfocarás en construir la aplicación en vez de perder tiempo pensando en cómo escribir los componentes.
  • No confundirás a la persona que lea tu código (puede ser tu yo del futuro!) escribiendo distintas formas los componentes de la app.

Mi prefernecia personal

Yo uso funciones con nombre y con "destructed props" para definir mis componentes:

function Text4({ message }) {
  return <div>{message}</div>
}
Mi preferencia personal: función con nombre y parámetros destructurados

¿Por qué? Bueno, comparemos:

function vs const

Cuando uso const, lo leo como “estoy definiendo una función anónima y la estoy guardando en una variable. Mientras que usando function lo leo como “aquí hay una función”.

Es más largo de escribir pero más fácil para leer.

Destructed props

Lo que me gusta de esto es que sé cuáles son las props aceptadas a medida que leo el componente. No es un argumento fuerte, ya que hay otras formas de hacerlo (ejemplo: TypeScript). Sin embargo, creo que es la más fácil y aplicable a una mayor cantidad de proyectos 😇

Cómo ser consistente sin necesidad de pensarlo

“Yo quiero escribir código. No quiero perder tiempo pensando en cómo debe lucir”

Sí, mantener el mismo estilo de código consistentemente en una aplicación es difícil. Si la convención es usar siempre ";", puede que hayan veces que se te olvide la regla.

Lo bueno es que hay formas de mantener la misma convención en nuestro código  🥰

En el mundo de JavaScript, la más popular es Prettier el cual es un "opinionated code formatter" (es decir, las reglas son indiscutibles y la herramienta te hará cumplirlas siempre). Lo genial es que cuando haces clic en "guardar", la herramienta formateará tu código y lo dejará hermoso  🧙