feat: Improve buffer lifecycle handling in useBuffer hook

[piaccho]

This PR modifies the useBuffer hook to simplify its implementation and improve performance.

• Removed the useRef, replacing it with a direct management of the buffer lifecycle.
• Replaced useLayoutEffect with useEffect for writing values to the buffer.
• Removed the timeout logic for buffer destruction, replacing it with a simpler cleanup mechanism that directly destroys the buffer if it is not already destroyed.

Test

To test the new implementation, I added proper logs in useBuffer hook and labeled buffers from ConfettiViz component to effectively trace the buffer lifecycle and renders. As it is seen in testing, the buffer is successfully reallocated on schema change and new data is successfully written on useEffect without performance impact.

Old implementation

old-implementation.mov

New implementation

new-implementation.mov

[iwoplaza]

Awesome! One question, could you test this out in React.StrictMode? I am wondering if the interplay between useMemo and the cleanup in useEffect could cause the first buffer to be destroyed even before it's first use.

[piaccho]

@iwoplaza You were right, my implementation caused that the first buffer was destroyed on first use. This ref based implementation wasn't for no reason 😅. I tried to implement this hook without using it, but with no success. I will revert to previous implementation and replace useLayoutEffect for useEffect for handling writing new values to buffer. When it comes to allocating a buffer only on mount and reallocating it if the data schema changes - I think it worked this way.