Ultimamente he pasado mucho tiempo leyendo sobre componentes de React, el ciclo de vida de los mismos, props, state, etc. Una de las cosas con las que me he topado ha sido el uso de los stateless components.

Como bien explica James K Nelson en su post, la parte más espesa de definir nuestro componente es que tenemos tres formas de declararlo:

• React.createClass
• ES6 Class
• Stateless Functional Component

James propone dos reglas sencillas:

• Si tu componente necesita acceder a 'this'. Usa las clases de ES6
• Si tu componente necesitas métodos de ciclos de vida. Usa las clases de ES6

En realidad podrías usar el tradicional React.createClass. A modo personal he tomado la iniciativa de definir mis componentes como clases (ES6). Quizás por comodidad, por moderneo o porque se me va la pinza.

El caso es que existe una regla de oro:

• Si tu componente se puede declarar como un Stateless Functional Component, que así sea.

¿Qué es un Stateless Functional Component?

La primera vez que leí esto pensé "¿No se puede llamar Stateless Component?" o simplemente tener un nombre más corto. Pues NO. Son cosas diferentes o como diría mi abuela; son parecidos pero distintos. Tyler McGinnis explica bastante bien las diferencias:

Stateless Component:

const UserList = React.createClass({
 render(){
   return (
     <div>
       <h3> User List </h3>
       <ul className="list-group">
         {this.props.users.map((user, index) => {
           return (
             <li className="list-group-item" key={user.name}>
               <h4><a href={user.html_url}>{user.name}</a></h4>
               <p>{user.description}</p>
             </li>
           )
         })}
       </ul>
     </div>
   )
 }
})

class UserList extends React.Component {
 render(){
   return (
     <div>
       <h3> User List </h3>
       <ul className="list-group">
         {this.props.user.map((user, index) => {
           return (
             <li className="list-group-item" key={user.name}>
               <h4<<a href={user.html_url}>{user.name}</a>/h4>
               <p>{user.description}</p>
             </li>
           )
         })}
       </ul>
     </div>
   )
 }
}

Stateless Functional Component:

const UserList = ({users}) => {
 return (
   <div>
     <h3> User List </h3>
     <ul className="list-group">
       {users.map((user, index) => {
         return (
           <li className="list-group-item" key={user.name}>
             <h4><a href={user.html_url}>{user.name}</a></h4>
             <p>{user.description}</p>
           </li>
         )
       })}
     </ul>
   </div>
 )
}

Debemos notar la diferencia entre uno y otro. Este último es solo una función que recibe "repos" como parámetro. A diferencia de los otros dos, no tiene métodos para el ciclo de vida. Por tanto si nuestro componente solo renderiza lo adecuado es que se declare como un Stateless Functional Component.

En BuildWithReact usan estas sintaxys para los Stateless Functional Components y no están mal como un "estandar" personal

//component fits on one line
const ListItem = (props) => <li className="list-item">{props.item.name}</li>;

//component has no logic outside JSX
const List = ({ items }) => (
 <ul className="list">
   {items.map(item => <ListItem item={item} />)}
 </ul>
);

//component needs logic outside JSX.
const Body = (props) => {
 let items = transformItems(props.rawItems);
 return (
   <div>
     <h1>{props.header}</h1>
     <List items={items} />
   </div>
 );
};