Which one is your preferred way of declaring Stateless functional components in React.js and Why ?

Question

Function Declaration

function MyComponent(props, context) {}

Function Expression

const MyComponent = function(props, context){}

Arrow function

const MyComponent = (props, context) => {}

This is rather pointless given that they are all just JavaScript functions and this has been answered [before](http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) — enjoylife, Dec 02 '15 at 17:47

score 0 · Answer 1 · answered Dec 02 '15 at 18:55

Function Declaration if you want hoisting and prefer readability over performance.

Function Expression if you want to name your function so you can identify it easier from debugging stack traces (e.g from Chrome dev tools).

Arrow Function if you want if you don't care about having an anonymous function in your stack trace and want to avoid binding this.

score 0 · Answer 2 · answered May 14 '16 at 11:07

My stateless components look like this, which seems very clean to me and pretty much looks just like HTML. Also, es6 arrow functions assume the return expression if you dont use brackets, so you can leave those out:

const Table = props => 
    <table className="table table-striped table-hover">
        <thead>
            <tr >
                <th>Name</th>
                <th>Contact</th>
                <th>Child Summary</th>
            </tr>
        </thead>
        <tbody>
            {props.items.map(item => [
                <TableRow itemId={item.id} />,
                item.isSelected && <TableRowDetails itemId={item.id} /> 
            ])}
        </tbody>
    </table>

Which one is your preferred way of declaring Stateless functional components in React.js and Why ?

2 Answers2