I have a dashboard app that processes data streams and user actions via useReducer and immer to update the state. These updates are available when React is ready to render.

I would like to invite others to make their own dashboard widgets for my app. These widgets would be driven by the derived state from the dashboard's reducer.

Some complex widgets might want to also useReducer locally. They might have their own local data streams and inputs. Herein lies a design problem - widgets that useReducer will be one render behind the rest of the dashboard!

In my understanding, this is because output from the dashboard useReducer is only available just before a render, which means widgets driven by this data that want to useReducer locally must update via useEffect and thereby wait another render to draw their state.

Possible solutions:

• "lift state up" into the dashboard, but this breaks a clean separation of interests - the state of one widget is not relevant to the other widgets. It will make maintenance a chore and cumbersome.
• useMemo in widgets to wrangle and process data before rendering. To ensure state is not lost, I could also have useMemo update and return a value initially generated by useRef. This seems... like an anti-pattern.