nlkitai/nlux

Using `React.memo` with a custom renderer crashes.

Closed this issue · 3 comments

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 ?

Investigating.

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?

Now working in @nlux/react 2.5.7