Skip to content

Commit fcf67bc

Browse files
committed
docs(readme): update uasge section
1 parent b9d2dd8 commit fcf67bc

File tree

1 file changed

+15
-6
lines changed

1 file changed

+15
-6
lines changed

README.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,32 @@ Easy State aims to make React's state management simpler without adding new synt
1111

1212
## Usage
1313

14+
Add the `@easyState` decorator to all of your components - except stateless (function) components - and enjoy the benefits.
15+
1416
```js
1517
import React, { Component } from 'react'
1618
import easyState from 'react-easy-state'
1719

1820
@easyState
1921
export default class App extends Component {
20-
render() {
21-
const { name } = this.state
22+
constructor () {
23+
super()
24+
this.state = { counter: 0 }
25+
}
26+
27+
render () {
28+
const { counter } = this.state
2229

2330
return (
2431
<div>
25-
<div>Name: <input onChange={this.updateName}/></div>
26-
<p>Hello {name}!</p>
32+
<span>Counter: {counter}</span>
33+
<button onClick={this.increment}>Increment</button>
2734
</div>
2835
)
2936
}
3037

31-
updateName (ev) {
32-
this.state.name = ev.target.value
38+
increment () {
39+
this.state.counter++
3340
}
3441
}
3542
```
@@ -56,6 +63,8 @@ export default class App extends Component {
5663

5764
- Renders always run before the next repaint.
5865

66+
- Easy State implements an optimal `shouldComponentUpdate` for your components, so you don't have to worry about doing it by hand.
67+
5968
As a result the state is always fresh and a stable and fresh view is always achieved before the next repaint with the minimal number of required renders.
6069

6170
## Examples with live demos

0 commit comments

Comments
 (0)