Decrease unnecessary network requests about flagsmith-js-client

[kyle-ssg]

Hey @MarkLyck

I'm afraid I can't replicate this, are you sure your component isn't remounting? Remounting the provider will cause this which I think is reasonable vs re-rendering which doesn't seem to.

Given this example I only see 1 call, even after re-renders:

function MyApp({ Component, pageProps, flagsmithState }: AppProps & {flagsmithState: IState}) {
    const [state, setState] = useState<number>(0)
    return (
        <div>
            <button onClick={()=>setState(Date.now())}>re-render</button>
            <div>{state}</div>
            <FlagsmithProvider
                options={{
                    environmentID,
                    cacheFlags: true,
                    identity: "1234",
                    traits: {
                        id: 1,
                        allowed_company_uids: 2,
                        preferred_username: 3,
                    },
                }}
                flagsmith={flagsmith}
            >
                <Component {...pageProps} />
            </FlagsmithProvider>
        </div>

    );
}

Im assuming that you're wrapping your entire web app with 1 provider?

[MarkLyck]

@kyle-ssg hmmm that's strange.

I'm definitely not unmounting anything (at least on purpose) and yeah I only have 1 Provider wrapping my entire application.

I did try to add a console log in my AppProvider components and I do see that the console log, logs 3 times. But those (to my knowledge) are not unmounting or remounting anything.

my App Provider looks like this:

const AppProvider = ({ children }: ProvidersProps) => {
  const { i18n } = useTranslation()
  const { theme, user } = useStore((state: any) => ({
    theme: state.theme,
    user: state.user,
  }))

  const antDLocale = i18n.language === 'fr-CA' ? frFR : enUS

  const SuperProvider = composeWrappers([
    ({ children }) => (
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    ),
    ({ children }) => <CubeProvider>{children}</CubeProvider>,
    ({ children }) => <BreakpointProvider>{children}</BreakpointProvider>,
    ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>,
    ({ children }) => (
      <ConfigProvider locale={antDLocale}>{children}</ConfigProvider>
    ),
    ({ children }) => (
      <FlagsmithProvider
        options={{
          environmentID: APP_CONFIG.FLAGSMITH_ENV,
          cacheFlags: true,
          identity: user.sub,
          traits: {
            id: user.sub,
            allowed_company_uids: user.allowed_company_uids,
            preferred_username: user.preferred_username,
          },
        }}
        flagsmith={flagsmith}
      >
        {children}
      </FlagsmithProvider>
    ),
  ])

  console.log('This logs 3 times')

  return (
    <SuperProvider>
      <>{children}</>
    </SuperProvider>
  )
}

Where composeWrappers is a small helper function:

// creates a "superProvider" to avoid "WrapperHell"
const composeWrappers = (
  wrappers: React.FunctionComponent[]
): React.FunctionComponent =>
  wrappers.reduce(
    (Acc, Current): React.FunctionComponent => (props) => (
      <Current>
        <Acc {...props} />
      </Current>
    )
  )

export default composeWrappers

And there's nothing above this, just ReactDOM rendering

const renderApp = () => {
  ReactDOM.render(
    <AppProvider>
      <Routes />
    </AppProvider>,
    document.getElementById('root')
  )
}

the user is available on first render. (this is using zustand state management)

I don't see how this could end up getting unmounted? My app is client-side only as well. So no server side rendering going on.

[kyle-ssg]

I think the best course of action is to get a minimal example repo up that replicates the issue, would you be able to do that?

[kyle-ssg]

Closing as stale