11'use client' ;
22
3- import React , { useEffect , useRef , useState } from 'react' ;
3+ import React , { useEffect , useState } from 'react' ;
44
55import {
66 Capability ,
@@ -37,16 +37,18 @@ const CAPABILITIES: Capability[] = [
3737 'track-hooks' ,
3838] ;
3939
40- export default function ClientRoot ( { children } : { children : React . ReactNode } ) {
41- const [ clients , setClients ] = useState < ClientRecord [ ] > ( [ ] ) ;
42- const commandHandlers = useRef ( new Map < string , CommandHandler > ( ) ) ;
43- const handlerReadyMap = useRef ( new Map < string , ( ) => void > ( ) ) ;
44- const clientsRef = useRef < ClientRecord [ ] > ( [ ] ) ;
45- const entityMap = useRef ( new Map < string , IClientEntity > ( ) ) ;
40+ const commandHandlers = new Map < string , CommandHandler > ( ) ;
41+ const handlerReadyMap = new Map < string , ( ) => void > ( ) ;
42+ const entityMap = new Map < string , IClientEntity > ( ) ;
43+ let clientRecords : ClientRecord [ ] = [ ] ;
44+
45+ function onReady ( readyId : string ) {
46+ handlerReadyMap . get ( readyId ) ?.( ) ;
47+ }
4648
47- const onReady = ( readyId : string ) => {
48- handlerReadyMap . current . get ( readyId ) ?. ( ) ;
49- } ;
49+ export default function ClientRoot ( { children } : { children : React . ReactNode } ) {
50+ const [ , setRenderTick ] = useState ( 0 ) ;
51+ const rerender = ( ) => setRenderTick ( ( n ) => n + 1 ) ;
5052
5153 useEffect ( ( ) => {
5254 const ws = new TestHarnessWebSocketBuilder ( )
@@ -70,25 +72,25 @@ export default function ClientRoot({ children }: { children: React.ReactNode })
7072 const Provider = createLDReactProviderWithClient ( client ) ;
7173
7274 const handlerReady = new Promise < void > ( ( resolve ) => {
73- handlerReadyMap . current . set ( id , resolve ) ;
75+ handlerReadyMap . set ( id , resolve ) ;
7476 } ) ;
7577
76- clientsRef . current = [ ...clientsRef . current , { id, client, Provider } ] ;
77- setClients ( [ ... clientsRef . current ] ) ;
78+ clientRecords = [ ...clientRecords , { id, client, Provider } ] ;
79+ rerender ( ) ;
7880
7981 await handlerReady ;
80- handlerReadyMap . current . delete ( id ) ;
82+ handlerReadyMap . delete ( id ) ;
8183
82- const entity = createReactClientEntity ( id , commandHandlers . current , ( ) => client . close ( ) ) ;
83- entityMap . current . set ( id , entity ) ;
84+ const entity = createReactClientEntity ( id , commandHandlers , ( ) => client . close ( ) ) ;
85+ entityMap . set ( id , entity ) ;
8486 return entity ;
8587 } )
86- . onGetClient ( ( id ) => entityMap . current . get ( id ) )
88+ . onGetClient ( ( id ) => entityMap . get ( id ) )
8789 . onDeleteClient ( ( id ) => {
88- entityMap . current . delete ( id ) ;
89- clientsRef . current . find ( ( r ) => r . id === id ) ?. client . close ( ) ;
90- clientsRef . current = clientsRef . current . filter ( ( r ) => r . id !== id ) ;
91- setClients ( ( prev ) => prev . filter ( ( r ) => r . id !== id ) ) ;
90+ entityMap . delete ( id ) ;
91+ clientRecords . find ( ( r ) => r . id === id ) ?. client . close ( ) ;
92+ clientRecords = clientRecords . filter ( ( r ) => r . id !== id ) ;
93+ rerender ( ) ;
9294 } )
9395 . build ( ) ;
9496
@@ -99,9 +101,9 @@ export default function ClientRoot({ children }: { children: React.ReactNode })
99101 return (
100102 < >
101103 { children }
102- { clients . map ( ( { id, Provider } ) => (
104+ { clientRecords . map ( ( { id, Provider } ) => (
103105 < Provider key = { id } >
104- < ClientInstance clientId = { id } handlers = { commandHandlers . current } onReady = { onReady } />
106+ < ClientInstance clientId = { id } handlers = { commandHandlers } onReady = { onReady } />
105107 </ Provider >
106108 ) ) }
107109 </ >
0 commit comments