Fix/error when using update context

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unleash/proxy-client-react",
-  "version": "3.4.0",
+  "version": "3.4.1-beta.0",
   "description": "React interface for working with unleash",
   "main": "./dist/index.js",
   "browser": "./dist/index.browser.js",

src/FlagProvider.test.tsx

@@ -24,6 +24,7 @@ const updateContextMock = jest.fn();
 const startClientMock = jest.fn();
 const stopClientMock = jest.fn();
 const onMock = jest.fn().mockReturnValue('subscribed');
+const offMock = jest.fn();
 const isEnabledMock = jest.fn().mockReturnValue(true);
 const UnleashClientSpy: jest.SpyInstance = jest.spyOn(
   UnleashClientModule,
@@ -49,6 +50,7 @@ UnleashClientSpy.mockReturnValue({
   stop: stopClientMock,
   isEnabled: isEnabledMock,
   on: onMock,
+  off: offMock,
 });
 
 const noop = () => {};
@@ -232,6 +234,7 @@ test('should update when ready event is sent', () => {
     stop: stopClientMock,
     isEnabled: isEnabledMock,
     on: localMock,
+    off: offMock,
   });
 
   const providerProps = {
@@ -264,6 +267,7 @@ test('should register error when error event is sent', () => {
     stop: stopClientMock,
     isEnabled: isEnabledMock,
     on: localMock,
+    off: offMock,
   });
 
   const providerProps = {
@@ -297,6 +301,7 @@ test('should not start client if startClient is false', () => {
     stop: stopMock,
     isEnabled: isEnabledMock,
     on: onMock,
+    off: offMock,
   });
 
   const providerProps = {

src/FlagProvider.tsx

@@ -19,6 +19,8 @@ const FlagProvider: React.FC<React.PropsWithChildren<IFlagProvider>> = ({
   const client = React.useRef<UnleashClient>(unleashClient);
   const [flagsReady, setFlagsReady] = React.useState(false);
   const [flagsError, setFlagsError] = React.useState(null);
+  const flagsErrorRef = React.useRef(null);
+  const callbackRegisteredRef = React.useRef(null);
 
   if (!config && !unleashClient) {
     console.warn(
@@ -31,13 +33,24 @@ const FlagProvider: React.FC<React.PropsWithChildren<IFlagProvider>> = ({
     client.current = new UnleashClient(config);
   }
 
-  client.current.on('ready', () => {
+  const errorCallback = (e: any) => {
+    // Use a ref because regular event handlers are closing over state
+    // with stale values:
+    flagsErrorRef.current = e;
+
+    if (flagsErrorRef.current === null) {
+      setFlagsError(e);
+    }
+  };
+  const readyCallback = () => {
     setFlagsReady(true);
-  });
+  };
 
-  client.current.on('error', (e: any) => {
-    setFlagsError(e);
-  });
+  if (!callbackRegisteredRef.current) {
+    client.current.on('ready', readyCallback);
+    client.current.on('error', errorCallback);
+    callbackRegisteredRef.current = 'set';
+  }
 
   React.useEffect(() => {
     const shouldStartClient = startClient || !unleashClient;
@@ -51,6 +64,8 @@ const FlagProvider: React.FC<React.PropsWithChildren<IFlagProvider>> = ({
     // stop unleash client on unmount
     return function cleanup() {
       if (client.current) {
+        client.current.off('error', errorCallback);
+        client.current.off('ready', readyCallback);
         client.current.stop();
       }
     };