Hi, I am using growthbook with nextJS. Currently I...
# announcements
v
Hi, I am using growthbook with nextJS. Currently I am following the given tutorials and loading features and setting attributes in
_app.tsx
. But I feel like its unnecessary for the pages that are not using the features. What would be the implications of setting attributes and fetching features in the same component that uses the feature?
Also is it necessary to wrap entire application in growthbook provider? (Asking because it has been done in all tutorials and sample code)
f
you can do it else where, though using the provider makes it easy if you’re deploying features product wide
the SDK is very fast
v
I tried using it without the provider but the
useFeatureValue
hook does not return the value. It works fine if I wrap the component with a provider. Is there something I am missing regarding avoiding the Provider?
f
did you set the attributes ?
v
yes
I am setting them in a useEffect. Would that lead to some issue?
f
could, yes
would you like to share your code?
v
Copy code
const growthbook = new GrowthBook({
  apiHost: '<https://cdn.growthbook.io>',
  clientKey: growthbookClientKey,
  enableDevMode: !(isBeta() || isProduction()),
  trackingCallback: (experiment, result) => {
    sendEvent(
      eventCategory.AB_TEST,
      eventAction.EXPERIMENT_VIEWED,
      experiment.key,
      result.variationId,
      {
        experimentId: experiment.key,
        variationId: result.variationId,
      },
    );
  },
});

const EdpressoUserActions = ({}) => {
  const loggedIn = useTypedSelector(
    (state) => !!<http://state.user.info?.data?.user_id|state.user.info?.data?.user_id>,
  );

  const feature_value = useFeatureValue('edpresso_aa_test', 'fallback');
  console.log('feature_value', feature_value);

  React.useEffect(() => {
    const loadFeatures = async () => {
      await growthbook.loadFeatures({
        autoRefresh: true,
        timeout: 2000,
      });
    };
    try {
      loadFeatures();
    } catch (error) {
      sendErrorEvent(error);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
    const sessionId =
      !loggedIn && !document.cookie.match(/_ga=(.+?);/)
        ? ''
        : document.cookie
            .match(/_ga=(.+?);/)[1]
            .split('.')
            .slice(-2)
            .join('.');

    growthbook.setAttributes({
      loggedIn: loggedIn,
      id: sessionId,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loggedIn]);

.....}
f
ya, almost certainly a race condition