fix: ensure click-to-copy buttons are created after hydration

[rbarbazz]

Problem

I noticed a bug where the code blocks click-to-copy buttons aren't available on the initial page load or after a page refresh.
The buttons became available again after the next navigation event.

Screen.Recording.2025-01-16.at.10.01.04.AM.mov

I couldn't figure out the exact cause of the issue, but I suspect that it has to do with hydration. The markup is overridden after the effect responsible for creating the buttons runs.

In my investigation, I referred to the code for the Remix documentation website (here), which shares a similar implementation, but I am unsure why it's not an issue there.

Solution

Because I couldn't pinpoint the exact problem, I decided to remove the effect dependencies to ensure it runs with every render. Since the effect manipulates the DOM outside of React, it might be a good idea to re-run it every time anyway.

Screen.Recording.2025-01-16.at.10.01.33.AM.mov

I did try using the useHydrated hook (in the same file) to ensure the hook runs after hydration, but that didn't work.

[brookslybrand]

Oh interesting, that's super weird

It's definitely a little less efficient in the sense that the useEffect runs a few extra times. However, it's also definitely better that this works

I throttled CPU perf 20x and everything seems fine. I'm not seeing runaway effects or anything like that. I think this works for now, but if anyone can figure out what this wasn't working in the first place or a better solution, I'm all for that as well