MessageHub example and Weakmaps

[bstro]

Hi there, I'm trying to get a handle on how react-spring works and I'm working through some of the examples. Looking at the MessageHub example, I see two Weakmaps being created right off the bat (lines 11 and 12) for refs and timeouts. I understand why these data structures exist, but I'm not clear on why Weakmaps are advantageous in this situation. I haven't used Weakmaps much and I don't have any intution for why they are useful in this situation. I also wonder why are they initialized within a useState, and why that state is later being mutated with the Weakmap's setter instead of the useState setter (lines 18 and 32)?

Thanks a bunch!

[aleclarson]

I think @drcmda wrote that example, so he could give more insight, but I'm pretty sure the use of WeakMap in that example is unwarranted. Using a normal Map would make no difference, AFAICT. Nevermind, brain fart. 😅

PS: If you're interested in trying v9 out, the example you linked was updated here.

[bstro]

Thanks a bunch! I'd still love to hear from @drcmda about the WeakMap stuff, but your answer was super helpful.

[bstro]

If anyone comes across this and has the same question, I learned more about WeakMaps and I think I get it.

With the messageHub, the messages get cleared out on a timer. When the timer expires, they get removed from the data structure. But if the example had used an ordinary Map or Object, there would still be a reference to that item object in the refMap and the cancelMap (each are Weakmaps indexed by the item), but I don't actually care about that reference anymore, and it can be garbage collected automatically. That's what Weakmaps do. As soon as the removeItem setter is called either in lines 32 or 43, the weakmaps lose their corresponding entry as well. In this case, using the Weakmap prevent a memory leak without me needing to remember to clean up after myself.

Pretty cool stuff. If someone sees this and sees an aspect of this that I've missed, I'd love to hear about it.

I found this article that helped me finally understand it.