Fractal exposes an asynchronous messaging protocol between the embedded UI and the host application. This means that your component can render before the protocol handshake has completed.

In concrete terms, your component might render before your data is ready, and you will have to handle that!

You have two options for handling this case.

Option 1: Handle the loading state

Fractal’s useUIMessenger doesn’t give you a loading field to condition on. Instead, if you are expecting data to be non-null, then you can simply check that it is not null before attempting to render it.

import { useFractal } from '@fractal-mcp/server-ui-react';
 
export default function Hello() {
  const { data } = useFractal();
  if (!data) {
    return <div></div>
  }
  return (
    <div>
      <p>Hello, <span>{data.name}</span></p>
    </div>
  );
}

Option 2: Initialize UIMessenger before bootstrap

Normally when you bootstrap an app, you have a file that looks like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyComponent from './MyComponent';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<MyComponent />);

You can force the UIMessenger to initialize before bootstrap by calling await initUIMessenger():

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyComponent from './MyComponent';
import { initUIMessenger } from '@fractal-mcp/server-ui-react';
 
const bootstrap = async () => {
  await initUIMessenger();
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<MyComponent />);
};
 
bootstrap();

If you do this, your call to useUIMessenger() will return the final data on the first try.