Infinite Re-renders Caused By the Renderer Component?

[mabernethy]

I've been working with this library the last 2 days and finally got my registry and catalog to the point where I could test it within our application. We are using this tool only within a Chatbot. Our Chatbot is not streaming right now, it's a simple request/response chatbot. It returns a data object with two fields, a text field and a ui field. The ui field is a JSON object, which is the generated tree. Currently we are hard-coding the tree response, so the LLM on our server isn't making any determination of what the UI should look like yet.

I'm seeing an issue with the <Renderer> component in our application where it seems to be infinitely re-rendering. This is freezing up the application and I need to kill the tab and start again each time. I'm attaching a screenshot of the generated UI (a Button component and a CodeBlock component). You can also see I have React Scan enabled, showing that the re-renders are slowing the app down to 24 fps (where it freezes).

Conversely, when I use the exact same code and even include the JSONUIProvider, but with only a fragment as the child, the application runs fine at 60 fps. This indicates to me something internal in the Renderer is re-rendering constantly. I've tried memoizing it as well, as you can see in the code below.

const tree: UITree = React.useMemo(() => {
    return {
      root: 'flex',
      elements: {
        flex: {
          key: 'flex',
      // more

const actionHandlers = React.useMemo(() => {
    return {
      hello: (params: any) => {
        console.log('Send to LLM', params);
      },
    };
  }, []);

  const memoizedRenderer = React.useMemo(() => {
    return (
      <JSONUIProvider actionHandlers={actionHandlers} registry={registry}>
        {/* <></> */}
        <Renderer tree={tree} registry={registry} />
      </JSONUIProvider>
    );
  }, [tree, actionHandlers]);

return (
    <div>
      <FlexRow css={{marginTop: rem(16), marginBottom: rem(16)}}>
        {memoizedRenderer}
      </FlexRow>
    </div>
  );