Faster React state management for complex components - reactjs

Question

Recently, I tried to use both Redux and MobX state management libraries for React, however, if you're implementing more complex pages with a large amount of bindings (i.e. 1000) it comes a bit slow to re-render whole VDOM for a single property change of the state. Therefore, I've tried to implement library that would re-render only those components that listens to used binding.
In a ViewModel you can define Observable objects, arrays and actions. To change value any value you can use this.set function (similar to redux action) that will set the value of an observable, but components that listens to this binding will be re-rendered later on this.applyChanges call.
export class ArrayViewModel extends ViewModel {
todo: Observable<string> = new Observable("");
todos: ObservableArray<string>
= new ObservableArray(
[
new Observable("milk"),
new Observable("carrot")
]
);
addTodo = () => {
this.set(this.todos, [ ...this.todos.get(), new Observable(this.todo.get())]);
this.set(this.todo, "");
this.applyChanges();
}
}
You would need to extend Component type and attach store (similar to redux) with your ViewModel (state). To print any value you can use this.bind function that will register component to updates of the property.
export class ArrayComponent extends Component<ArrayViewModel, ArrayComponentProps, {}> {
constructor(props: ArrayComponentProps) {
super(props);
}
componentDidMount() {
}
render() {
return (
<div>
<p>
<Textbox store={this.store} text={this.vm.todo} />
<button onClick={this.vm.addTodo}>
Add Todo
</button>
</p>
<ul>
{this.bind(this.vm.todos).map(todo => {
return (
<li key={todo.id}>
<Literal store={this.store} text={todo} />
</li>
);
})}
</ul>
<ul>
{this.bind(this.vm.todos).map(todo => {
return (
<li key={todo.id}>
<Textbox store={this.store} text={todo} />
</li>
);
})}
</ul>
</div>
);
}
}
In a component, the set action on store can be easily called on change (re-renders only current component) and applied on blur (will re-render all components that uses the same binding);
export class Textbox<TProps extends TextboxProps, TState>
extends Component<ViewModel, TProps, TState> {
constructor(props: TProps & ComponentProps) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e: React.ChangeEvent<HTMLInputElement>) {
this.change(this.props.text, e.target.value);
if (this.props.onChange) {
this.props.onChange(e);
}
}
render() {
return (
<input
type="text"
value={this.bind(this.props.text)}
onChange={this.handleChange}
onBlur={this.applyChanges}
/>
);
}
}
It won't be faster with adding, deleting or sorting the array, but it will be much faster to render changes of any array item values.
I understand that all things could be done easier by using decorators (don't have this skill yet), but I'd like to ask whether you think that this approach could have a performance impact on complex components written in React. I'm pretty new with React and I might be missing something, so please let me know your opinion.

Answer 1

Don't reinvent the wheel.
More complex use cases require a deeper knowledge of the way react works internally. Two things are the most important: avoiding render and making render result 'stable'/pure (the same result for the same props) - avoiding real DOM updates as a result of reconciliation (diffing VDOM/real DOM).
You should start from the begining - normal react state and standard optimalizations (docs): shouldComponentUpdate, PureComponent etc.
You can use this.props.onChange directly in render (use propTypes to make it required). Binding in render harms performance - every render call creates a new ref and forces real DOM update.

Answer 2

I think #xadm has got most of it covered. Few more additions to the same.
When it comes to complex problems having a second look at, structure, state and performance concepts is very important. React provides concepts which help you to better your application performance.
It takes the lifting state up approach to share state between components. Here is where you feel a requirement of a better structure to manage inter-component states. Although it's not a bad idea taking that approach, you would need to know react's performance concepts before you do. React.PureComponent in above case.
I have been using Rootz JS since quite some time on pretty much complex situations. As it handles complex state changes quite well. It does help me structuring my app too.
There is a sample Todo App made with Rootz JS. In case you might want to have a glance.
Here's how the source code looks like.
I like the Concept of Contracts which you might be interested in.