Initializing the LucraClient

Creating a Singleton (Recommended for Frontend Libraries)

When using the LucraClient in frontend frameworks like React, Vue, or Angular, it's important to create a singleton instance outside of component render cycles. Creating the client inside a component body or render function will cause a new instance to be created on every render, which can lead to memory leaks and unexpected behavior.

Recommended approach:

// lucraClient.ts (or similar module file)
import { LucraClient } from 'lucra-web-sdk';

let lucraClientInstance: LucraClient | null = null;

export function getLucraClient(): LucraClient {
  if (!lucraClientInstance) {
    lucraClientInstance = new LucraClient({
      tenantId: "<your Lucra tenant id>",
      env: "sandbox" | "production",
      onMessage: {
        // callback functions
      },
    });
  }
  return lucraClientInstance;
}

In your component:

import { getLucraClient } from './lucraClient';

function MyComponent() {
  // ✅ Good: Use the singleton instance
  const lucraClient = getLucraClient();
  
  // ❌ Bad: Don't create inside component body
  // const lucraClient = new LucraClient({ ... });
  
  // ❌ Bad: Don't create inside useEffect without proper cleanup
  // useEffect(() => {
  //   const client = new LucraClient({ ... });
  // }, []);
}