I am writing a sandbox testing environment for a complex component (Labeler) in our codebase. The complex component uses a large hook to manage state right now (LabelerHook), and the hook as specific functions I want to be able to use for sandbox testing. I have a working version, but it's very clunky.

Right now, I have a page that is the sandbox passing in dummy props to the Labeler component. This works well for instantiating the component, but doesn't give me the ability to interact with the hook. To do that, I am using a window.ref to pass the hook up.

// somewhere inside labeler
window.hook = labelerHook 


// somewhere that is parent of labeler
let hook = window.hook 

However, this doesn't work well because I noticed that after rerenders of the labeler, the hook in the parent of the labeler and the hook in the labeler is not in sync. Right now, I have a "refresh" function that I have to click everytime they go out of sync.

I know there must be a better way of passing this data up, but I don't want to pass extra props into labeler because that could cause many issues and we can't move LabelerHook up either.

I've heard of people using context but I'm not sure how to use it here to pass a hook upward either?