Make components stateless

[mxstbr]

Remove all classes and make all components pure functions. E.g. turn

class Example extends Component {
    render() {
        return (
            <h1>Hello {this.props.name}!</h1>
        );
    }
}

into

function Example(props) {
    return (
        <h1>Hello {props.name}</h1>
    );
}

Positives

• Performance improvement (src)
• Not possible to use setState(), which is an anti-pattern anyway so we help to keep devs from using it. Since we're using Redux, everything should flow through a reducer.
• Might be better unit testable, have to look into it.

Negatives

• No component lifecycle methods, which might confuse newcomers, so that's another thing we'd have to explain in the docs.

---

Is the more explanation in the documentation worth it? I think so.

[hampusohlsson]

It is hard to completely get rid of the lifecycle methods, as you probably will need them for some components. A better approach might be to make the distinction between smart and dumb components.

[mxstbr]

@hampusohlsson that's a great link, thanks! How would you reflect that split in the application structure?

[yjcxy12]

Not really sure if this is good idea. As discussed above, getting rid of all the state and lifecycle methods is not easy and sometimes not necessary. (e.g. a Countdown component might need secondsLeft state, but parent components don't need to be aware this state)

Separating "smart" and "dumb" component can be done putting them into different folders - "containers" for "smart" components and "components" for "dumb" components.

[mxstbr]

👍 I really like that approach.

What about pages - they are stateful components, but I feel like they should be in their own folder?

I'm closing this issue in favor of #27, please comment there!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.