This repository contains two examples how a central immutable object store can be read/written by many React components. I built the same application twice with different architectures, called id-references and nested. The example applications manage an arbitrary JSON document, but the principles can be applied to structured data as well.
Install node.js, then run:
npm install
npm run devThis will start a development server on localhost.
This implementation stores the whole JSON document as a nested object tree. The whole object tree is treated as immutable, existing objects are never modified after creation. That means that whenever a nested value changes, all ancestor objects and arrays must be replaced as well.
The advantage of treating objects/arrays as immutable is that we can use React.memo. Objects will change identity iff their values change, therefore if an object identity hasn't changed it's values and all it's descendants also haven't changed and we don't need to re-render the component sub-tree.
To try out this app, edit file src/main.tsx and comment/uncomment the import { App } from ... statements.
This implementation stores each JSON value as a separate top-level value in a NodeRepository class and assigns each value a unique UUID.
Objects and arrays don't store child values directly, they only store their child node IDs.
Objects and arrays are once again treated as immutable and are replaced in the node repository on change; however, since they only store ID references, ancestors don't need to be replaced when a descendant value changes.