Frequently Asked Questions

A curated summary of the top questions asked on our Slack community, often relating to implementation, functionality, and building better products generally.
Statsig FAQs
ea OpenAI affirm Univision Microsoft Notion Vanta DispatchHealth NoCap OfferUp Brex Made
GENERAL

How can I prevent flickering caused by `client.updateUserAsync` in Statsig's React bindings?

Date of slack thread: 7/5/24

Anonymous: For some reason, using client.updateUserAsync removes the provider’s children (unmounts the component) and adds them back (mount component), causing our app to flicker when the user information gets loaded and set on the client. Did anyone else experience this? Is there a workaround?

Anonymous: Apparently there’s no such prop on the new provider component Property 'mountKey' does not exist on type 'IntrinsicAttributes & StatsigProviderProps'

Anonymous: Hey Gabriel - Can you share the code snippet of where you initialize Statsig & updateUser?

Anonymous: Also, if you can include what version you’re using, that would be great!

Anonymous: Hi! I’m using version 1.4.0

Anonymous: here’s my component :

import nullThrows from '@shared/utils/nullThrows';
import { StatsigClient } from '@Statsig/js-client';
import { StatsigProvider } from '@Statsig/react-bindings';
import { runStatsigSessionReplay } from '@Statsig/session-replay';
import { runStatsigAutoCapture } from '@Statsig/web-analytics';
import getFavoriteTeamId from 'features/team/selectors/getFavoriteTeamId';
import getTeamId from 'features/team/selectors/getTeamId';
import { getUser } from 'features/user/user.selectors';
import { useEffect, useMemo, useState } from 'react';
import { useAppSelector } from 'store';
import Preloader from 'shared/components/Preloader';

function useAsyncClient(): { isLoading: boolean; client: StatsigClient } {
    const [isLoading, setIsLoading] = useState(true);

    const client = useMemo(() => {
        const statsigClient = new StatsigClient(
            nullThrows(process.env.REACT_APP_STATSIG_CLIENT_TOKEN),
            {},
            {
                environment: { tier: process.env.REACT_APP_STATSIG_ENVIRONMENT },
            },
        );

        runStatsigSessionReplay(statsigClient);
        runStatsigAutoCapture(statsigClient);

        statsigClient
            .initializeAsync()
            .then(() => {
                setIsLoading(false);
            })
            .catch((err) => {
                console.error(err);
            });

        return statsigClient;
    }, []);

    return { client, isLoading };
}

function StatSigProvider({ children }: { children: React.ReactNode }) {
    const favouriteTeamId = useAppSelector(getFavoriteTeamId);
    const teamId = useAppSelector(getTeamId) || favouriteTeamId;
    const user = useAppSelector(getUser);

    const { client, isLoading } = useAsyncClient();

    useEffect(() => {
        if (client && user?.id && teamId) {
            client.updateUserAsync({
                userID: user?.id.toString(),
                customIDs: { teamID: teamId.toString() },
            });
        }
    }, [teamId, user?.id, client]);

    if (isLoading) {
        return <Preloader />;
    }

    return <StatsigProvider client={client}>{children}</StatsigProvider>;
}

export default StatSigProvider;

Sophie (Statsig): Thanks for including the information! Where were you trying to call for the mountKey & getting the error that you saw above?

Anonymous: return <StatsigProvider client={client}>{children}</StatsigProvider>;

Anonymous: I tried adding mountKey as a prop on the <StatsigProvider component

Tore (Statsig): The mountKey prop is on the old react sdk, not the react bindings you are using here, sorry for the confusion from the bot.

Anonymous: yes, I noticed. Is there an equivalent in the new react sdk?

Tore (Statsig): Not yet. I think we probably need an sdk update here

Anonymous: Could you suggest a workaround that I could use until that update is out? The flickering introduced by updateUserAsync is pretty annoying

Tore (Statsig): The fastest way would be to write your own provider. In this case, the provider renders the children only when the status is ready

https://github.com/statsig-io/js-client-monorepo/blob/main/packages/react-bindings/src/StatsigProvider.tsx#L38

Anonymous: The thing is that one of the children triggers the request that gets the userId and teamId that I need to set on the statsig user, so I need to render the children. My expectation was that the statsig provider would not unmount and remount the children when the user gets updated, but it just triggers a re-render

Tore (Statsig): I understand that completely. For now, the easiest thing to do would be to just copy that provider but always render the children

Anonymous: I’ll give that a try

Join the #1 experimentation community

Connect with like-minded product leaders, data scientists, and engineers to share the latest in product experimentation.

Try Statsig Today

Get started for free. Add your whole team!

Why the best build with us

OpenAI OpenAI
Brex Brex
Notion Notion
SoundCloud SoundCloud
Ancestry Ancestry
At OpenAI, we want to iterate as fast as possible. Statsig enables us to grow, scale, and learn efficiently. Integrating experimentation with product analytics and feature flagging has been crucial for quickly understanding and addressing our users' top priorities.
OpenAI
Dave Cummings
Engineering Manager, ChatGPT
Brex's mission is to help businesses move fast. Statsig is now helping our engineers move fast. It has been a game changer to automate the manual lift typical to running experiments and has helped product teams ship the right features to their users quickly.
Brex
Karandeep Anand
President
At Notion, we're continuously learning what our users value and want every team to run experiments to learn more. It’s also critical to maintain speed as a habit. Statsig's experimentation platform enables both this speed and learning for us.
Notion
Mengying Li
Data Science Manager
We evaluated Optimizely, LaunchDarkly, Split, and Eppo, but ultimately selected Statsig due to its comprehensive end-to-end integration. We wanted a complete solution rather than a partial one, including everything from the stats engine to data ingestion.
SoundCloud
Don Browning
SVP, Data & Platform Engineering
We only had so many analysts. Statsig provided the necessary tools to remove the bottleneck. I know that we are able to impact our key business metrics in a positive way with Statsig. We are definitely heading in the right direction with Statsig.
Ancestry
Partha Sarathi
Director of Engineering
We use cookies to ensure you get the best experience on our website.
Privacy Policy