# React Style Guide
### Prefer Stateless functional components where possible.
Stateless function components are more concise, and there are plans for react to increase performance of them.
Good:
```
export function KuiButton(props) {
return
};
```
Bad:
```
export class KuiButton extends React.Component {
render() {
return
}
}
```
### When state is involved, use ES6 style React Classes over ES5.
Good:
```
export class ClickCounter extends React.Component {
state = { clickCount: 0 };
onClick = () => {
this.setState(prevState => ({
clickCount: prevState.clickCount + 1
}));
}
render() {
return
}
}
```
Bad:
```
export const ClickCounter = React.createClass({
getInitialState() {
return {
clickCount: 0
};
},
onClick() {
this.setState(prevState => ({
clickCount: prevState.clickCount + 1
}));
},
render() {
return
}
});
```
### When a state change involves the previous state or props, pass setState a function instead of an object.
https://facebook.github.io/react/docs/react-component.html#setstate
Good:
```
this.setState((prevState, props) => ({
clickCount: prevState.clickCount + props.incrementValue
}));
```
Bad:
```
this.setState({ clickCount: this.state.clickCount + this.props.incrementValue });
```
Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.
- https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
This will be even more important when the fibers-based implementation is released:
- https://github.com/acdlite/react-fiber-architecture
- https://www.youtube.com/watch?v=ZCuYPiUIONs
### Prefer reactDirective over react-component
When using ngReact to embed your react components inside angular html, prefer
reactDirective over react-component. You can read more about these two ngReact methods [here](https://github.com/ngReact/ngReact#features).
Using `react-component` means adding a bunch of components into angular, while `reactDirective` keeps them isolated,
and is also a more succinct syntax.
Good:
```
```
Bad:
```
```
### Prefix ui_framework elements with kui, but not their file names.
Good:
```
button.js:
export function KuiButton(props) {
return
};
```
Bad:
```
button.js:
export function Button(props) {
return
};
```
The filenames leave it off because snake casing already increases file name length.
### Action function names and prop function names
Name action functions in the form of a strong verb and passed properties in the form of on. E.g:
```
```
### Avoid creating a function and passing that as a property, in render functions.
Best (relies on [stage 2 proposal](https://github.com/tc39/proposal-class-public-fields)):
```
export class ClickCounter extends React.Component {
state = { clickCount: 0 };
// This syntax ensures `this` is bound within handleClick
onClick = () => {
this.setState(prevState => { clickCount: prevState.clickCount + 1 });
}
render() {
return
}
}
```
Good:
```
export class ClickCounter extends React.Component {
constructor() {
this.state = { clickCount: 0 };
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState(prevState => { clickCount: prevState.clickCount + 1 });
}
render() {
return
}
}
```
Bad:
```
export class ClickCounter extends React.Component {
state = { clickCount: 0 };
onClick() {
this.setState(prevState => { clickCount: prevState.clickCount + 1 });
}
render() {
return