Optimizely works with React. The popular framework has been growing in usage and we keep hearing the same statements like, “Optimizely does not work with React,” and we’d like to say that this is just not true.
Cro Metrics has been running experimentation for several React-based apps for some time, and while it does require a bit more technical overhead, it is far from impossible. Here are a few common issues and how we address them:
Handling React’s State & Re-Rendering
Problem: “React wipes away our DOM changes applied via javascript manipulation”
Solution: It sure does, but you can write the code such that it observes those updates and reapplies your manipulations. By hooking that up, and then using requestAnimationFrame, flickering can be avoided.
Problem: “React form elements don’t let us apply values via javascript”
Solution: React maintains its own state which is rendered to the DOM repeatedly. This prevents the most common approaches of setting form input values. You can get React to register these changes by feigning real inputs — jQuery isn’t good enough — or by editing the React state directly.
Detecting Pages in the React SPA
Problem: “Our site is a React SPA, so Optimizely doesn’t activate our experiments properly”
Solution: You’re right, out of the box, Optimizely doesn’t handle SPAs particularly well. We often have to write up some custom code to get some facet of a SPA to cooperate. With React, it’s typically a matter of detecting the logical page changes. This is accomplished by patching into the reactroot component to broadcast page-end and page-start events, and then sending another event that asks Optimizely to re-activate its experiments.
We can help!
Optimizely trusts us with their most important React clients, because we put a heavy emphasis on solving tough engineering challenges. Contact us today to see how we can help you.