Frequently Asked Questions

In order to get the useExperiment hook to work correctly in your code, you need to ensure that the StatsigProvider wraps your entire app or at least the root component that uses Statsig. This is because the StatsigProvider initializes the SDK and passes down its state to the rest of the React application via a StatsigContext.Here's how you can modify your code:

jsx // Initialize Statsig at a higher level, ideally in your app's root component <StatsigProvider  sdkKey=CLIENT_SDK_KEY  waitForInitialization={true}  user={{userID: userData?.id, email: userData?.email}}  options={{    environment: { tier: "development" },  }} >  <App /> {/* Your app's root component */} </StatsigProvider> // Then in your ButtonModal component export function ButtonModal({ ...props }: ButtonModalProps) {  const classes = useStyles();  const [ isButtonModalOpen, setIsButtonModalOpen ] = useState(false);  const { config } = useExperiment("button_test");  // Rest of your code... } By doing this, the StatsigProvider will initialize the SDK once and provide the necessary context for all child components. This should allow the useExperiment hook to work correctly. Remember, you cannot call useExperiment in the same component that is rendering the provider. The provider needs to wrap a component above this in the hierarchy.