This message was deleted.
# sdk-reactw
worried-planet-2191
10/24/2023, 3:45 PMThis message was deleted.
f
fresh-football-47124
10/24/2023, 10:17 PM
It might be a race condition, are you sure that the useFeatureIsOn is happening after the useEffect that sets the attributes?
b
billowy-lizard-55653
10/25/2023, 12:02 PMThanks Graham, the attribute was not being set in time as you say. To make it work I also followed this:
https://maxrozen.com/fetching-data-react-with-useeffect
and modified App() ended up being as follows. I hope this saves someone some time. This way GB is seemingly ready to go in other components.
Copy code
export default function App() {
const nonce = useNonce();
const data = useLoaderData();
const [gbLoaded, setData] = useState(null);
useEffect(() => {
// Load features from the GrowthBook API and initialize the SDK
const fetchData = async () => {
await gb.loadFeatures();
const getClientIdPromise = new Promise((resolve) => {
ReactGA.gtag('get', 'G-XXX', 'client_id', resolve);
})
await getClientIdPromise.then((clientId) => {
gb.setAttributes({
clientId,
});
})
setData(gb)
}
fetchData().catch(console.error);
}, []);
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{gbLoaded &&
<GrowthBookProvider growthbook={gbLoaded}>
<Layout {...data}>
< Outlet />
</Layout>
</GrowthBookProvider>
}
<ScrollRestoration nonce={nonce} />
<Scripts nonce={nonce} />
<LiveReload nonce={nonce} />
</body>
</html>
);
}87 Views