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 haveuseMemo
update and return a value initially generated byuseRef
. This seems... like an anti-pattern.