Skip to content

Commit bfca278

Browse files
committed
docs(readme): update readme
1 parent dfeefb1 commit bfca278

File tree

2 files changed

+20
-3
lines changed

2 files changed

+20
-3
lines changed

README.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
Easy State aims to make React's state management simpler without adding new syntax. To achieve this it makes the following modifications.
44

55
- It replaces React's `setState()` with plain native JavaScript.
6-
- It bypasses the asynchronity and performance issues of `setState`.
76
- It auto binds your component's methods.
87

98
## Installation
@@ -35,7 +34,7 @@ export default class App extends Component {
3534
}
3635
```
3736

38-
You can find more examples with live demos [here](/examples).
37+
**You can find [more examples with live demos here](/examples).**
3938

4039
### About decorators
4140

@@ -52,6 +51,24 @@ You can find more examples with live demos [here](/examples).
5251
- React native is not yet supported
5352
- IE is not supported
5453

54+
## Key features
55+
56+
- Your state can use any valid JavaScript. Feel free to use nested objects, arrays, expando properties, getters/setters, inheritance and ES6 collections directly.
57+
58+
- State mutations are picked up and they trigger the render method when appropriate.
59+
60+
- The render method is only triggered if it is affected by state mutations. If it doesn't use the mutated part of the state or the mutation doesn't change the state, the render method is not triggered.
61+
62+
- The render method is never executed immediately. Triggered renders are collected in a batch and executed in one go after a small delay.
63+
64+
- Duplicates renders are removed. A render never runs twice in one batch - no matter how many times it got triggered. Renders run in first trigger order.
65+
66+
- Renders may trigger others renders by mutating the state. In this case loops are automatically resolved.
67+
68+
- Renders always run before the next repaint.
69+
70+
As a result a stable and fresh state and view is always achieved before the next repaint with the minimal number of required renders.
71+
5572
## How does it work?
5673

5774
Under the hood it uses the [@nx-js/observer-util](https://github.com/nx-js/observer-util) library, which relies on ES6 Proxies to observe state changes. Thanks to the Proxies it doesn't have edge cases or limitations. You can write any JS code without worrying about the render function. [This blog post](https://blog.risingstack.com/writing-a-javascript-framework-data-binding-es6-proxy/) gives a little sneak peek under the hood of the `observer-util`.

examples/todoMVC/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class App extends Component {
2222

2323
return (
2424
<div className="todoapp">
25-
<header className="header">
25+
<header className="header">
2626
<h1>todos</h1>
2727
<input onKeyDown={create} className="new-todo"
2828
placeholder="What needs to be done?" autoFocus={true} />

0 commit comments

Comments
 (0)