React/Next.js Google Optimize A/B Test implementation Hook

useExperiment.js

import { useEffect, useState } from "react";

const useExperiment = (
  experimentId,
  defaultVariant,
  event = "optimize.activate"
) => {
  const [variant, setVariant] = useState(defaultVariant);
  useEffect(() => {
    if (window.dataLayer) {
      window.dataLayer.push({ event: event });
    }
    const intervalId = setIntervalWithLimit(() => {
      if (window.google_optimize !== undefined) {
        const variantLoaded = window.google_optimize.get(experimentId);
        setVariant(Number(variantLoaded) || 0);
        clearInterval(intervalId);
      }
    }, 200);
    return () => clearInterval(intervalId);
  }, []);
  return { variant };
};

export default useExperiment;

// Function that creates interval and resets it if the code runs more than 20 times
function setIntervalWithLimit(callback, delay, limit = 20) {
  let counter = 0;
  const interval = setInterval(() => {
    if (counter >= limit) {
      clearInterval(interval);
    }
    callback();
    counter++;
  }, delay);
  return interval;
}