Global State

Global State

The way we decided to manage information that needs to be shared between components from now on, using the custom Hook useGlobalState

Usage

usable in any functional component like this

import { useGlobalState } from "../GlobalState"
const [variableName, setVariable] = useGlobalState('variableName')

using that code, you can access the state content unter variableName and update it with setVariable(newValue)
note: all components using the state (like shown above) will be listerners to this variable and re-render on update, no matter what component updated it!
Functions that should be available globally can be a value of the GlobalState as well.

the state Object

to keep track of all accessors for each part of the state we list below each part of the GlobalState Object with its listeners and modifiers and the reason thais variable needs to be global

variable name	initial state	listeners	modifiers	why global?
listeningLooper	undefined	App, menu	menu	menu creates each listening looper, canvas accesses it when adding events
nextLooperID	1	menu	menu	no reason so far, move to local useState(1) in menu asap
runningLoopers	new Map()	App, menu	App, menu	menu adds new loopers to Map, App needs to keep track of all running loopers
musicCtrl	new MusicCtrl()	App, menu		App triggers tone, menu assigns musicCtrl to looper when creating looper

Persistence

react-global State docs