Editor: onTextChange handler does not reflect updated props

[artcab]

Describe the bug

The onTextChange handler of the PrimeReact Editor component appears to be caching the initial value of props passed to its containing component, leading to inconsistencies in behavior when those props change.

Reproducer

https://stackblitz.com/edit/ylsaqj?file=src%2FApp.jsx

PrimeReact version

10.5.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Attempt to access a prop value inside onTextChange handler of <Editor />.

from the stackblitz example:

1. click on the add button a couple of times, to update the count.
2. type in both the textarea and in the Editor.
3. check the console: onChange can access the current value. OnTextChange reports the initial value.

Expected behavior

You should be able to access the current prop values. Instead, props return their initial value.

[melloware]

IS that PrimeReact version 3.3.1 correct? The latest version is 10.5.1 have you checked this bug is not already fixed?

[artcab]

@melloware the version has been corrected from 3.3.1 to 10.5.1 in this issue, my bad; yes, this is happening on the latest version.

[melloware]

Thanks let me take a look!

[melloware]

Weird I don't see anything obvious in the code that would cause this do you? The Editor component really doesn't have too much too it it just passes through to QuillJS?

[kl-nevermore]

This should be a problem with react Hook to define an event handler with an always-stable function identity
I simply modified code like...
Tip: code is for testing only

const fn = useEvent(()=>{
    props.onTextChange()
})

useUpdateEffect(() => {
    quill.current?.on('text-change', fn);

    return () => {
        quill.current?.off('text-change', fn);
    };
});

maybe also need to provide hooks caching functions like useEvent or useMemoizedFn for off event

[melloware]

@kl-nevermore are you going to provide a PR? If so I can assign this one to you?