POC - Multiple Context Providers vs. Redux Store

Currently, when the context is updated any components that consumes appState via context provider will be re-rendered. Metronome.tsx runs into latency issues when playing the click as the re-render caused by the context will force the sound to play.

Solution

refactor the metronome state into its own Context
move away from Context API and use the redux store

Reference

It's because of how the state is encapsulated. In react-redux, state is encapsulated inside a store. When you pass the store to Provider in react-redux - you are using the Context API (see this in react-redux) but here's the kicker - the redux context never changes (in 99% of implementations anyway). So the Consumers of the Redux context will never re-render the way a regular context consumer would (because the value supplied by the context never changes).

https://stackoverflow.com/questions/67254562/the-difference-between-context-api-and-redux

rsmpark / tempo_tester

POC - Multiple Context Providers vs. Redux Store #20