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.