Favour stateless functions over classes when there's no state

Author: Juan Lulkin

react/README.md

@@ -5,7 +5,7 @@
 ## Table of Contents
 
   1. [Basic Rules](#basic-rules)
-  1. [Class vs `React.createClass`](#class-vs-reactcreateclass)
+  1. [Class vs `React.createClass` vs stateless](#class-vs-reactcreateclass-vs-stateless)
   1. [Naming](#naming)
   1. [Declaration](#declaration)
   1. [Alignment](#alignment)
@@ -27,25 +27,44 @@
 
 ## Class vs `React.createClass`
 
-  - Use `class extends React.Component` unless you have a very good reason to use mixins.
+  - If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins.
 
   eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md).
 
     ```javascript
     // bad
     const Listing = React.createClass({
-      render() {
-        return <div />;
+      // ...
+      render: function() {
+        return <div>{ this.state.hello }</div>;
       }
     });
 
     // good
     class Listing extends React.Component {
+      // ...
       render() {
-        return <div />;
+        return <div>{ this.state.hello }</div>;
       }
     }
     ```
+    
+    And if you don't have state or refs, prefer functions over classes:
+    
+    ```javascript
+
+    // bad
+    class Listing extends React.Component {
+      render() {
+        return <div>{ this.props.hello }</div>;
+      }
+    }
+    
+    // good
+    function Listing({ hello }){
+      return <div>{ hello }</div>;
+    }
+    ```
 
 ## Naming