React State Management Design

[ddfridley]

Unpoll needs a state manager. Redux is not acceptable - it's a long discussion if interested - but here are the requirements for the state manager design

• Ability to use the browser's forward/back buttons to move through state. This likely means that history.pushState and .popState are used
• Ability to refresh the page, or go back to the current URL, and get to the current position/state - likely this means that state info is encoded in the URL and the URL is updated with each state change. Again, pushState and popState are likely
• Components with state are reused in a hierarchy or recursively - so the key to a component instance's state needs to be relative to it's place in the hierarchy not absolute. This may imply that some prop does need to be passed from parent to child, but open to ideas.
• URL/Routes to pages/Components are programmatic not constant. Look at the location.url to determine the path, or compute it.
• Components will render on the server side first, then be rehydrated and continue on the browser side. Much data is fetched on the server side, and then passed to the browser on the initial load.
• Data is obtained through API calls - likely it should be separate from state, but sometimes data can be changed asynchronously by the server (using socket.io connections not REST)
• Related code should be in the same place, ideally the same file, or the same directory. Having to separate code for a single function or feature, into different directories should be avoided. (no Redux) Think of each new product features as a module, and try to keep all the pieces of that module together in one place.

[ddfridley]

I've create useMethods as a start for this: https://github.com/EnCiv/unpoll/blob/main/app/lib/use-methods.js but there is still a long way to go - and I'm open to common APIs if we can find something that fits.