refactor: react contract tests (#1226)

This PR will:
- move some variable around for the react SDK so it is a bit more
readable in my opinion

## Context
This PR is the result of some exploration on how to make the react
contract more idiomatic to react. A few things that I looked into:
- changing evaluation to `useVariation` flags
- changing some of the internal commands to use react hooks
- removing some of the `useRef`

Ultimately, most of the exploration did not yield a good result because
they require very verbose changes. A lot of the code consolidation, I
think, should be consolidated into the shared contract test tooling
package.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moves client/handler bookkeeping from React state/refs to module-level
globals with manual re-rendering, which could introduce
lifecycle/state-leak issues across mounts or tests. Changes are limited
to contract-test harness code, but affect client creation/deletion and
command routing timing.
> 
> **Overview**
> Refactors the React contract-test harness to manage clients and
command handlers via module-level `Map`s/arrays instead of
`useRef`/component state, triggering UI updates via a simple render
tick.
> 
> Client creation/deletion now updates global `clientRecords` and uses a
shared `onReady` resolver map to coordinate when `ClientInstance` has
registered its command handler before returning the client id. Also
removes a stale comment in `ClientEntity.ts`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
14cef1f. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
<!-- devin-review-badge-begin -->

---

<a href="https://app.devin.ai/review/launchdarkly/js-core/pull/1226"
target="_blank">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

Author: joker23

packages/sdk/react/contract-tests/app/ClientEntity.ts

@@ -80,8 +80,6 @@ export function makeSdkConfig(options: SDKConfigParams, tag: string): LDOptions
   return cf;
 }
 
-// NOTE: we can make this more idiomatic to React by creating a useCommand hook and reading return values from
-// a rendered component. But for now, this is just a simple way to get the tests running.
 export async function doCommand(client: LDReactClient, params: CommandParams): Promise<unknown> {
   const logger = makeLogger('doCommand');
   logger.info(`Received command: ${params.command}`);

packages/sdk/react/contract-tests/app/ClientRoot.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { CreateInstanceParams } from '@launchdarkly/js-contract-test-utils/client';
 import {
@@ -18,24 +18,28 @@ interface ClientRecord {
   Provider: React.FC<{ children: React.ReactNode }>;
 }
 
+const commandHandlers = new Map<string, CommandHandler>();
+const handlerReadyMap = new Map<string, () => void>();
+let clientRecords: ClientRecord[] = [];
+let clientCounter = 0;
+
+function onReady(readyId: string) {
+  handlerReadyMap.get(readyId)?.();
+}
+
 export default function ClientRoot({ children }: { children: React.ReactNode }) {
-  // Keeps a list of all the clients that we have, we will need to keep this as a state
-  // to ensure that the ld client providers are being rendered.
-  const [clients, setClients] = useState<ClientRecord[]>([]);
-  const commandHandlers = useRef(new Map<string, CommandHandler>());
-  const handlerReadyMap = useRef(new Map<string, () => void>());
-  const clientCounterRef = useRef(0);
-  const clientsRef = useRef<ClientRecord[]>([]);
+  const [, setRenderTick] = useState(0);
+  const rerender = () => setRenderTick((n) => n + 1);
 
   useEffect(() => {
     const ws = new TestHarnessWebSocket(
       'ws://localhost:8001',
-      commandHandlers.current,
+      commandHandlers,
 
       // On create client
       async (params: CreateInstanceParams) => {
-        const id = String(clientCounterRef.current);
-        clientCounterRef.current += 1;
+        const id = String(clientCounter);
+        clientCounter += 1;
 
         const timeout =
           params.configuration.startWaitTimeMs !== null &&
@@ -63,45 +67,38 @@ export default function ClientRoot({ children }: { children: React.ReactNode })
           throw new Error('client initialization failed');
         }
 
-        // Currently these tests are creating the provider with a custom ld client, which is a
-        // supported feature, but I think it would be better if we can use the create provider
-        // factory function instead.
         const Provider = createLDReactProviderWithClient(client);
 
         const handlerReady = new Promise<void>((resolve) => {
-          handlerReadyMap.current.set(id, resolve);
+          handlerReadyMap.set(id, resolve);
         });
 
-        clientsRef.current = [...clientsRef.current, { id, client, Provider }];
-        setClients((prev) => [...prev, { id, client, Provider }]);
+        clientRecords = [...clientRecords, { id, client, Provider }];
+        rerender();
 
         await handlerReady;
-        handlerReadyMap.current.delete(id);
+        handlerReadyMap.delete(id);
         return id;
       },
 
       // On delete client
       (id: string) => {
-        clientsRef.current.find((r) => r.id === id)?.client.close();
-        clientsRef.current = clientsRef.current.filter((r) => r.id !== id);
-        setClients((prev) => prev.filter((r) => r.id !== id));
+        clientRecords.find((r) => r.id === id)?.client.close();
+        clientRecords = clientRecords.filter((r) => r.id !== id);
+        rerender();
       },
     );
 
     ws.connect();
     return () => ws.disconnect();
   }, []);
 
-  const onReady = useCallback((readyId: string) => {
-    handlerReadyMap.current.get(readyId)?.();
-  }, []);
-
   return (
     <>
       {children}
-      {clients.map(({ id, Provider }) => (
+      {clientRecords.map(({ id, Provider }) => (
         <Provider key={id}>
-          <ClientInstance clientId={id} handlers={commandHandlers.current} onReady={onReady} />
+          <ClientInstance clientId={id} handlers={commandHandlers} onReady={onReady} />
         </Provider>
       ))}
     </>