fix: extract handlers and add cleanup function (#96)

This commit fixes an issue where refs where not set on ready event, and adds cleanup of the event listeners for the useEffect.

Author: FredrikOseberg

src/FlagProvider.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { IConfig, UnleashClient } from 'unleash-proxy-client';
 import FlagContext, { IFlagContextValue } from './FlagContext';
 
-interface IFlagProvider {
+export interface IFlagProvider {
   config?: IConfig;
   unleashClient?: UnleashClient;
   startClient?: boolean;

src/index.ts

@@ -23,6 +23,8 @@ import useVariant from './useVariant';
 import useUnleashContext from './useUnleashContext';
 import useUnleashClient from './useUnleashClient';
 
+import { IFlagProvider } from './FlagProvider';
+
 export {
   FlagContext,
   FlagProvider,
@@ -34,4 +36,6 @@ export {
   useUnleashClient,
 };
 
+export type { IFlagProvider };
+
 export default FlagProvider;

src/useFlag.ts

@@ -9,18 +9,28 @@ const useFlag = (name: string) => {
 
   useEffect(() => {
     if (!client) return;
-    client.on('update', () => {
+
+    const updateHandler = () => {
       const enabled = isEnabled(name);
       if (enabled !== flagRef.current) {
         flagRef.current = enabled;
         setFlag(!!enabled);
       }
-    });
+    };
 
-    client.on('ready', () => {
+    const readyHandler = () => {
       const enabled = isEnabled(name);
+      flagRef.current = enabled;
       setFlag(enabled);
-    });
+    };
+
+    client.on('update', updateHandler);
+    client.on('ready', readyHandler);
+
+    () => {
+      client.off('update', updateHandler);
+      client.off('ready', readyHandler);
+    };
   }, [client]);
 
   return flag;

src/useVariant.ts

@@ -11,7 +11,8 @@ const useVariant = (name: string): Partial<IVariant> => {
 
   useEffect(() => {
     if (!client) return;
-    client.on('update', () => {
+
+    const updateHandler = () => {
       const newVariant = getVariant(name);
       if (
         variantRef.current.name !== newVariant.name ||
@@ -20,12 +21,22 @@ const useVariant = (name: string): Partial<IVariant> => {
         setVariant(newVariant);
         variantRef.current = newVariant;
       }
-    });
+    };
 
-    client.on('ready', () => {
+    const readyHandler = () => {
       const variant = getVariant(name);
+      variantRef.current.name = variant.name;
+      variantRef.current.enabled = variant.enabled;
       setVariant(variant);
-    });
+    };
+
+    client.on('update', updateHandler);
+    client.on('ready', readyHandler);
+
+    () => {
+      client.off('update', updateHandler);
+      client.off('ready', readyHandler);
+    };
   }, [client]);
 
   return variant || {};