vercel-labs / vercel-labs/json-render
Infinite Re-renders Caused By the Renderer Component?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 901
- Avg merge
- 3h 14m
- Merged PRs (30d)
- 4
Description
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>
);
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the Renderer and JSONUIProvider entry points and reproduce the freeze with the hard-coded UITree, memoized actionHandlers, and the Button and CodeBlock elements shown in the report. Compare this with the fragment-only case to identify the source of the repeated renders. Done means the same tree renders without an infinite loop or freezing the application.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100