fix: memoize React client to provide stability (#1276)

## This PR

👋 Maybe I'm missing something, but `useOpenFeatureClient` currently
returns an unstable `client` that is recreated every time the provider
re-renders, if you pass a domain into the provider instead of a specific
client.

This PR wraps the creation of that client when a domain is passed in
`useMemo`, which should ensure that it is then stable for downstream
usage via the `useOpenFeatureClient` hook.

As an example, due to `client` being unstable (combined with the
`shouldRunNow` behaviour in the client), this logs `ready` every time
the provider re-renders rather than just once when the client is
actually ready.

```ts
  const client = useOpenFeatureClient();
  useEffect(() => {
    const ready = () => {
      console.log('ready');
    };

    client.addHandler(ProviderEvents.Ready, ready);
    return () => {
      client.removeHandler(ProviderEvents.Ready, ready);
    };
  }, [client]);
```

The closest workaround I've found currently is checking if the domain
matches w/ `useState` + `useEffect`:

```ts
  const client = useOpenFeatureClient();

  const [stableClient, setStableClient] = useState(client);
  useEffect(() => {
    setStableClient((existing) => (existing.metadata.domain === client.metadata.domain ? existing : client));
  }, [client]);

  useEffect(() => {
    const ready = () => {
      console.log('ready');
    };

    stableClient.addHandler(ProviderEvents.Ready, ready);
    return () => {
      stableClient.removeHandler(ProviderEvents.Ready, ready);
    };
  }, [stableClient]);

---------

Signed-off-by: Matt Cowley <[email protected]>
Signed-off-by: MattIPv4 <[email protected]>

Author: MattIPv4

packages/react/src/provider/provider.tsx

@@ -32,9 +32,7 @@ type ProviderProps = {
    * @returns {OpenFeatureProvider} context provider
    */
 export function OpenFeatureProvider({ client, domain, children, ...options }: ProviderProps): JSX.Element {
-  if (!client) {
-    client = OpenFeature.getClient(domain);
-  }
+  const stableClient = React.useMemo(() => client || OpenFeature.getClient(domain), [client, domain]);
 
-  return <Context.Provider value={{ client, options, domain }}>{children}</Context.Provider>;
+  return <Context.Provider value={{ client: stableClient, options, domain }}>{children}</Context.Provider>;
 }

packages/react/test/provider.spec.tsx

@@ -78,6 +78,20 @@ describe('OpenFeatureProvider', () => {
 
         expect(result.current.metadata.domain).toEqual(DOMAIN);
       });
+
+      it('should return a stable client across renders', () => {
+        const wrapper = ({ children }: Parameters<typeof OpenFeatureProvider>[0]) => (
+          <OpenFeatureProvider domain={DOMAIN}>{children}</OpenFeatureProvider>
+        );
+
+        const { result, rerender } = renderHook(() => useOpenFeatureClient(), { wrapper });
+
+        const firstClient = result.current;
+        rerender();
+        const secondClient = result.current;
+
+        expect(firstClient).toBe(secondClient);
+      });
     });
   });