it’s not clear from the documentation: when do the dom mutations get applied for the react sdk? I’m having some trouble getting the visual editor to work in my react app, and I think it might be due to the order of operations of when the mutations are applied and when my component is mounted

@swift-helmet-3648 ^

Hi @ambitious-parrot-39602 Using the Visual Editor with SPAs like React can be a little wonky. We mention this in the docs here (https://docs.growthbook.io/app/visual) If you're using React, we generally recommend using the React SDK w/ Feature Flags for a smoother integration. FYI what's happening under the hood - The Visual Editor is attached to a MutationObserver that is monitoring all DOM updates on the page and waits until the most recent DOM update to apply it's own mutations. With React and Vue, we've found that this doesn't work 100% of the time and results in some weird race conditions.

gotcha. so this used to work using the old method where we inject the js via the script tag method (which i think is deprecated?) - ideally i’d love to get the visual editor working as we have some non-technical folks wanting to use it and run tests, which i don’t think woudl be possible using feature flags?

I understand. Do you remember exactly what it was that worked previously with the old method? We want to address any regressions that come up. RE: MutationObserver - it is attached when we detect that the current page (URL) is targeted by a running experiment. This happens a few steps after instantiating the GrowthBookProvider, and always after making the first fetch to the features endpoint

do i need to manually communicate this change to the provider? or does it happen automatically?

You do need to invoke

setURL

within an SPA like React since the route changes may not behave like normal browser navigation events ... Here is a section in the docs with an example https://docs.growthbook.io/app/visual#spa-support

to answer your question about the old way, we just had a hook that did the following:

window.GROWTHBOOK_CONFIG = ...

const script = document.createElement('script');
script.setAttribute('src',<SCRIPT LOCATION>);
document.head.appendChild(script);

Glad that

setURL

worked

ah, no, i meant that old method used to work. i still can’t get it to work using setURL

One thing you can try is opening the GrowthBook Devtools panel, finding the experiment, and manually selecting a variation

oh you mean with the growthbook extension? or doing it through the dashboard that appends the ?param ?

The extension

from the extension, it works. but not when clicking on “Preview” link in the experiment dash. is that expected? (i definitely see the expeirment data sent down)

Is the experiment running or in draft state?

draft

Hm, I have one locally. Is there something I can show you from it?

could you share the code? i think i can get clarity by looking at it. if not, i’d love to schedule a time to chat

Ok, let me clean it up a bit and get back to you

if it’s easier, my email is james@sudowrite.com

Here it is, very simple https://github.com/bttf/growthbook-example

ok i figured it out! it turns out I wasn’t properly passing in the id attribute!

Hmm, okay. The preview links didn't work despite that though?

when i didn’t set id, the preview links did not work. this makes sense to me, as GB wouldn’t know how to bucket