React SDK: Lazy initialization of Split client

Question

When using React app, on initial load of a client-side application the Split key is not always directly available. The React SDK will initialize SplitFactory and useClient on the initial render, which means that with the current setup we have to initiate the Split client with a key that might not exist yet.

Answer

React SDK allows multiple client objects using the same Factory instance. It is recommended to use a dummy user key for the initial render, then when the actual user key is available initialize a second client object with the correct user key.

With the release of React SDK v1.2.0 this can be done properly via the SplitClient component or useClient hook.

Using the Javascript SDK:

/* On initial load of a client-side application /
const config = {
   core: {
      authorizationKey: 'YOUR-API-KEY',
      key: 'anonymous'
   }
}
const factory = SplitFactory(config);
const client = factory.client();
// attach a callback to run when the client with 'anonymous' key is ready
client.on(client.Events.SDK_READY, doSomething);
/ When you get a new user id, for instance, the id of a logged user */
const loggedClient = factory.client('user_id');
// attach a callback to run when the client with 'user_id' key is ready
loggedClient.on(loggedClient.Events.SDK_READY, doSomething);

Using React SDK with SplitClient component

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { SplitFactory, SplitClient, SplitTreatments } from '@splitsoftware/splitio-react';
import './index.css';
const sdkConfig = {
   core: {
      authorizationKey: 'YOUR-API-KEY',
      key: 'anonymous',
   }
}

function App() {
 // using 'anonymous' as initial userId
 const [userId, setUserId] = useState(sdkConfig.core.key);
 // update userId to 'loggedinId' after 3 seconds
 useEffect(() => {
   setTimeout(() => { setUserId('loggedinId'); }, 3000);
 }, [])
 return (
 <SplitFactory config={sdkConfig}>
   <SplitClient splitKey={userId}>
     <SplitTreatments names={[featureName]}>
       {({ treatments, isReady }) => {
         return isReady ?
           <p>Treatment for {userId} in {featureName} is: {treatments[featureName].treatment}</p> :
           <p>loading...</p>; // Render a spinner if the SDK is not ready yet
       }}
     </SplitTreatments>
   </SplitClient>
 </SplitFactory> 
 );
}

export default App;