Open ScreamZ opened 2 months ago
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 ..
Same issue, ;(
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
Investigating this as part of #122
Hello,
Using a custom avatar like so:
makes
AppAvatar
to trigger re-render on each keystroke while writing a message, which in some case might trigger network request in chainhttps://github.com/nlkitai/nlux/assets/6640835/a9c024f4-f623-4878-a6ea-e4d1a94dcec1
Might be an issue with react
key
? Nothing change if using memo too.