Sync state in React
npm install react-syncingSynchronize state between react components using pubsub.
Extends your main class (the typical App) from Master, the rest from Slave, the source of trust will be the Master
If you extends from Master or Slave:
instead of using setState, use set,
instead of using componentWillUnmount, use willUnmount,
and instead of using componentDidMount, use didMount
That's all!
``jsx
import {Master} from "react-syncing";
export class App extends Master {
render() {
return (
{this.state.name}
From another component
jsx
import {Slave} from "react-syncing";export class NameInput extends Slave {
didMount() {
// Default name
this.set({ name: "Name" });
}
render() {
return this.set({ name: e.target.value })} />;
}
}
``https://kidandcat.github.io/sync-performance/
All the squares are syncing the state with the Root element that keeps changing the color and adding new elements. Only the firs Square receives the color as a prop.
The first square shows the number of rendered elements.
In my computer, it renders 200 elements without any issue. After that, it start suffering delays, I would need to test react alone too. Anyway, obviously, you shouldn't be syncing every single component of your webpage.
MIT