Reflow is a wrapper for react components that gives you control over render updates. You are smarter than react. Only you know what really needs to update the UI.
Simple as that. Nothing more.
Fact.
> (val) => this.setState({ name: val }) !== (val) => this.setState({ name: val })
> true
> const createHandlerFor = (property) => (value) => this.setState({[property]: value})
>
> createHandlerFor("username") !== createHandlerFor("username")
> true
> ["foo", "bar"] !== ["foo", "bar"]
> true
> {borderColor: "red" } !== {borderColor: "red" }
> true
This issues in a massive overhead. A form usually doesn't have to rerender totally when the state changes.
Just wrap the component with Reflow
and stop unnecessary render cycles.
Prop | Type | Description |
---|---|---|
trigger | `any | undefined` |
oneOf | `any[] | undefined` |
Before: TextField rerenders even nothing changes.
<TextField value={this.state.userName} {...someMoreProps} />
After : TextField only rerenders when userName changes
<Reflow trigger={this.state.userName}>
<TextField value={this.state.userName} {...someMoreProps} />
</Reflow>
Before: TextField rerenders even nothing changes.
<TextField
key={"username"}
value={this.state.userName}
onChanged={this.createHandlerFor("username")}
/>
After : TextField only rerenders when userName changes
<Reflow trigger={this.state.userName}>
<TextField
key={"username"}
value={this.state.userName}
onChanged={this.createHandlerFor("username")}
/>
</Reflow>
Before: TextField rerenders even nothing changes.
<TextField
key={"username"}
value={this.state.userName}
onChanged={this.createHandlerFor("username")}
/>
After : TextField only rerenders when userName changes
<Reflow trigger={this.state.userName}>
<TextField
key={"username"}
value={this.state.userName}
onChanged={_ => this.handleUserNameChange(_)}
/>
</Reflow>
Before: Items is an array. So rerenders on every render
<List items={this.state.listItems} {...someMoreProps} />
After: List only rerenders if an array items changed
<Reflow oneOf={this.state.listItems}>
<List items={this.state.listItems} {...someMoreProps} />
</Reflow>
Before: Items is an object array. So rerenders on every render
<List items={this.state.listItems} {...someMoreProps} />
After: List only rerenders if an array items changed
<Reflow oneOf={this.state.listItems.map(x => x.key)}>
<List items={this.state.listItems} {...someMoreProps} />
</Reflow>