Component refreshes when useSelector() value changes

Question

I have a react-editor-js instance that allows the user to type in some blog content. My form submission button is up on the header and not on the form body. Therefore I use redux to let those button clicks known in my form.

When the button clicks, the isPublishing value in my redux changes. My form is listening to this component using const p = isPublishing(state=> state.test.isPublishing).

Refreshes are evil in this case, as it resets my EditorJs form data. It'd be amazing if I can listen to the changes without page refreshes. How can I achieve it? Thanks in advance!

You mean the form is rerendering, or the page is refreshing? state (useState) should persist in components rerenders unless for some reason the component is being remounted. To persist data after a page refresh you should use persistence storage (localStorage) — diedu, Jun 07 '21 at 04:24
It's a WYSIWYG editor-like interface. I don't think it would be a good decision if I'm storing data on the local storage on each keystroke, as it can be slower — Sachin Titus, Jun 07 '21 at 04:37
so, you are refreshing the page when `isPublishing` changes? — diedu, Jun 07 '21 at 04:39
The component listens to isPublishing so that it can know when the button is clicked. It would have been better if the change on isPublishing does not throw a refresh, but unfortunately it does — Sachin Titus, Jun 07 '21 at 04:47

score 0 · Answer 1 · answered Jun 09 '21 at 11:32

Thanks to @Shyam for the solution.

My assumption that useState and props cause render was correct. There is no direct way to avoid it.

I am using react-editor-js in my project and that's what caused the issue

  <EditorJs
    instanceRef={()=>{//code to save the reference as state variable}}
    enableReInitialize
    data={{}}
    tools={EDITOR_JS_TOOLS}
  />

The reason for state loss was that my instanceRef was being reassigned every time the component renders.

This reassignment can be prevented by wrapping the method to save the reference as a state variable with useCallback()

Component refreshes when useSelector() value changes

1 Answers1