Using `React.memo` with a custom renderer crashes.
Closed this issue · 3 comments
ScreamZ commented
As we discussed on Discord https://discord.com/channels/1197831161938980945/1247893613229379645
Given this code
import { StreamResponseComponentProps } from "@nlux/react";
import React from "react";
function _CustomRenderer<AiMsg = string>(props: StreamResponseComponentProps<AiMsg>) {
return (
<div className="flex flex-col">
<div ref={props.containerRef} />
<div className="grid grid-cols-3">
<button onClick={() => console.log("I like it!")}>👍</button>
<button onClick={() => console.log("I love it!")}>❤️</button>
<button onClick={() => console.log("I hate it!")}>😵</button>
</div>
</div>
);
}
export const CustomRenderer = React.memo(_CustomRenderer);
gives TypeError: c.responseRenderer is not a function
I discovered that while trying to avoid having one log line per item each time i touch a key on my keyboard to debug custom renderer props. I don't get why is that not considered as a simple React component ?
salmenus commented
Investigating.
salmenus commented
Are you sure it's not an import issue for your local codebase ?
memo
with custom renderers seem to work for me.
Example here:
https://codesandbox.io/p/sandbox/memo-custom-renderer-8ljrtd
Otherwise, can you please provide a reproducible CodesandBox example?
ScreamZ commented
Now working in @nlux/react 2.5.7