2

I am using react-quill, and it's requirement is that modules prop must be cached and shouldn't change. I am using useMemo hook to memoize it. The object is:

const modules = useMemo(() => ({
  key: {
    value: {
      handler: handlerFunc
    }
  }), [])

and it's used like:

<Quill
  modules={modules}
  value={value}
  onChange={onChange}
  // value and onChange are props
/>

handleFunc in modules object, just console logs value prop. The issue is that value is not latest, it's the first value. I tried same thing in class component and I was able to get the value and it works perfectly fine, but unfortunately it doesn't work with useMemo. Please note, I can't just put [value] in second argument of useMemo as modules shouldn't be changed.

Class component implementation:

class MyComponent extends React.Component {
  constructor() {
    super()
    this.handlerFunc = this.handlerFunc.bind(this)
    this.modules = this.initModules(this.handlerFunc)
  }

  initModules(handlerFunc) {
    return {
      key: {
        value: {
          handler: handlerFunc,
        },
      },
    }
  }

  handlerFunc() {
    console.log(this.props.value)
  }
}

But I can't use class-component as it's a requirement to use functional-components only. Is there any way, I can have latest value in useMemo, or yet any other solution?

U-Dev
  • 1,296
  • 5
  • 19
  • _The issue is that value is not latest, it's the first value._ - yes because you don't change the function. That's what memoizing does. Put `value` in the `useMemo` dependency array, but then you should know that the function will update when `value` does. – evolutionxbox Mar 02 '22 at 14:33
  • I know, do you have any other solution? – U-Dev Mar 02 '22 at 14:34
  • You have a conflict of concerns. Which is more important? The function should not change, or that it should change to have the latest `value` value? – evolutionxbox Mar 02 '22 at 14:35
  • I need exact implementation of class component. Why it's the latest value in class component? Even though I am assigning a static value in constructor, same like `useMemo` and it's not changing. But still I can access latest value in there, but not in `useMemo`. – U-Dev Mar 02 '22 at 14:36
  • It's not changing _because_ you're using `useMemo`. Please read their docs https://reactjs.org/docs/hooks-reference.html#usememo – evolutionxbox Mar 02 '22 at 14:59
  • Just remove "useMemo", not familar with quill but is there problem after removing "useMemo"? From the documentation it's bit strange as modules doesn't seem to have key attributes as written, only certain objects like history/toolbar/keyboards are accepted. – Han Mar 02 '22 at 15:34
  • I have just pasted dummy options, and regarding removing `useMemo` check [this](https://github.com/quilljs/quill/issues/1940#issuecomment-379536850). – U-Dev Mar 02 '22 at 15:38

1 Answers1

1

Why you are not assigning a ref to the editor and getting the value from it, instead of having it from value prop?

const editor = this.reactQuillRef.getEditor();
editor.getText(); // getText, getHTML or whatever

Here's the link

Inyourface
  • 532
  • 4
  • 12