proxy-client-react icon indicating copy to clipboard operation
proxy-client-react copied to clipboard

Flag Provider Re-rendering problem

Open Criezc opened this issue 8 months ago • 3 comments

Describe the bug

Hi there,

First, thank you for your work on this library - it's been really valuable for our project.

I've noticed what might be a performance issue with the FlagProvider component. During my debugging with React-Scan, I discovered that it's causing unnecessary re-renders in my application. The issue appears to be in the context value creation:

  const context = useMemo<IFlagContextValue>(
    () => ({
      on: ((event, callback, ctx) => client.current.on(event, callback, ctx)) as IFlagContextValue['on'],
      off: ((event, callback) => client.current.off(event, callback)) as IFlagContextValue['off'],
      updateContext: async (context) => await client.current.updateContext(context),
      isEnabled: (toggleName) => client.current.isEnabled(toggleName),
      getVariant: (toggleName) => client.current.getVariant(toggleName),
      client: client.current,
      flagsReady,
      flagsError,
      setFlagsReady,
      setFlagsError,
    }),
    [flagsReady, flagsError]
  );

While the dependency array only includes flagsReady and flagsError, new function references are created each time this memo runs, which causes context consumers to re-render even when only using the stable methods.

Would it make sense to memoize these function references with useCallback to maintain stable references across renders?

Thanks for considering this feedback!

Steps to reproduce the bug

No response

Expected behavior

No response

Logs, error output, etc.


Screenshots

Image

Additional context

No response

Unleash version

"@unleash/proxy-client-react": "^4.2.4"

Subscription type

Open source

Hosting type

Self-hosted

SDK information (language and version)

No response

Criezc avatar Mar 07 '25 10:03 Criezc