Using a custom avatar make multiple render

[ScreamZ]

Hello,

Using a custom avatar like so:

 personaOptions={{
              user: {
                name: user.displayName ?? "👾",
                avatar: (
                  <AppAvatar
                    fallbackTextSize={12}
                    avatar={user.image ?? undefined}
                    name={user.displayName ?? "Anonymous"}
                  />
                ),
              },

            }}

makes AppAvatar to trigger re-render on each keystroke while writing a message, which in some case might trigger network request in chain

https://github.com/nlkitai/nlux/assets/6640835/a9c024f4-f623-4878-a6ea-e4d1a94dcec1

Might be an issue with react key ? Nothing change if using memo too.

[salmenus]

Hi @ScreamZ

In your example, what you need to do is to memoize the avatar.

const myAvatar = useMemo(() => (
    <AppAvatar
        fallbackTextSize={12}
        avatar={user.image ?? undefined}
        name={user.displayName ?? "Anonymous"}
    />
  ), [ /* dependencies */ ]);

Then

 personaOptions={{
              user: {
                name: user.displayName ?? "👾",
                avatar: myAvatar,
              },
            }}

I hope all those unnecessary memoizations will become obsolete with React 19, but until then, they're still needed. Give it a try and let me know how it works for you ..

[ScreamZ]

Same issue, ;(

[lohit8846]

Hi @salmenus I am also running into this and did some react profiling to understand the extent of the problem

It looks like the entire AI Chat React component is re-rendering on every keystroke when writing a message. This issue is affecting both the Avatars and Response Renderers. I was able to confirm by using the playground example to make sure it was not any code that I introduced

I'm just using the basic react example and ran a profiling. On every key press this hook is causing issues and the reason react.memo does not work is because by the time it gets to Avatar and Renderer. It says "This is the first time component rendered" So memo does not work

[salmenus]

Investigating this as part of #122