All nodes are duplicated when React renders again (after a click on a Button for example)

[sbstnkll]

Hi,

I used your exact example at https://codesandbox.io/s/retejs-react-render-t899c?file=/src/index.js

I have implenented a Button with MaterialUI. As soon as I click on it (I think React then re-renderes), or when just another function is called, all nodes get duplicated.

How can I resolve this? Can I wrap the Editor in a React-component?

EDIT:

This is my exact code - codesandbox: https://codesandbox.io/s/hungry-cray-r2881?file=/src/App.js (You can replicate the error there - just click on the hamburger button)

Thanks, sebastian

[Ni55aN]

Since the ref attribute has an inline callback, the createEditor function is triggered on every rerender. As the basic example doesn't have rerenders, it is not reproducible.

I have updated an example and added useRete hook: https://codesandbox.io/s/retejs-react-render-t899c I hope it can fix the issue both with the creation of the editor and its destroy on unmount.

export function useRete() {
  const [container, setContainer] = useState(null);
  const editorRef = useRef();

  useEffect(() => {
    if (container) {
      createEditor(container).then((value) => {
        editorRef.current = value;
      });
    }
  }, [container]);

  useEffect(() => {
    return () => {
      if (editorRef.current) {
        editorRef.current.destroy();
      }
    };
  }, []);

  return [setContainer];
}

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.