Duplicate Proxy Calls

[melloware]

Describe the bug

Using latest React SDK I see the Proxy be query two times constantly.

Steps to reproduce the bug

Just run React app with proxy and watch the F12 network traffic.

Expected behavior

Only 1 call every 15 seconds

Logs, error output, etc.

No response

Screenshots

No response

Additional context

const unleashInstance: IConfig = {
	url: process.env.REACT_APP_UNLEASH_SERVER!,
	clientKey: process.env.REACT_APP_UNLEASH_KEY!,
	refreshInterval: 15,
	appName: 'clm',
	environment: process.env.REACT_APP_UNLEASH_ENV!,
	disableMetrics: true
};

Unleash version

Latest

Subscription type

Open source

Hosting type

Self-hosted

SDK information (language and version)

"@unleash/proxy-client-react": "^3.3.0",

[sighphyre]

Hmm, this looks odd, thanks for raising this one. I'll add this to our list of things to look into next week

[FredrikOseberg]

@melloware Is this happening in development or production?

[melloware]

i am in development mode right now.

[melloware]

i wasn't sure if this was a problem with React SDK or the client Proxy SDK so I reported it in both.

[FredrikOseberg]

i wasn't sure if this was a problem with React SDK or the client Proxy SDK so I reported it in both.

Thanks for the clarification! I think this is not a bug with this project, but actually how hot module reloading works according to this issue.

I will close this issue for now, feel free to re-open if you disagree.

[melloware]

What is interesting about this is it starts happening even if I load my app fresh so its not like I have done any hot reloads or anything?

Also it looks like the Hot Reload library is no longer needed as Fast Refresh is already included in Core React right? See: facebook/react#16604

[melloware]

I actually think to be good citizen you should be calling STOP on unmount as well like this..

React.useEffect(() => {
    const shouldStartClient = startClient || !unleashClient;
    if (shouldStartClient) {
      client.current.start();
    }

    // stop unleash client on unmount
    return function cleanup() {
       client.current.stop();
    };
  }, []);

[FredrikOseberg]

What is interesting about this is it starts happening even if I load my app fresh so its not like I have done any hot reloads or anything?

Also it looks like the Hot Reload library is no longer needed as Fast Refresh is already included in Core React right? See: facebook/react#16604

Are you using react in strict mode? See this issue

[FredrikOseberg]

I actually think to be good citizen you should be calling STOP on unmount as well like this..

React.useEffect(() => {
    const shouldStartClient = startClient || !unleashClient;
    if (shouldStartClient) {
      client.current.start();
    }

    // stop unleash client on unmount
    return function cleanup() {
       client.current.stop();
    };
  }, []);

Good idea. Feel free to open a separate issue or contribute a PR if you'd like. Otherwise I'll try to get to it next week.

[melloware]

Yep confirmed its REact 18 Strict Mode causing the issue!!!

So what happens is render gets called twice to make sure you are being a good citizen with your renders. I have fixed this in other projects where they were not handling the renders correctly.

Like this one I reported in use-between and he fixed it: betula/use-between#33

[melloware]

OK i will submit a PR.