Re-render the node editor dynamically

[chrisjpatty]

Re-render the node editor dynamically

[tjbaron]

A cleaner way to trigger rerender is by changing the “key” prop of NodeEditor to a new value. For example, the name or position of the tab the user navigates to.

const [tab, setTab] = useState(“default”);
return <>
    <Tabs>
        <Tab onClick={()=>setTab(“default”)} />
        <Tab onClick={()=>setTab(“other”)} />
    </Tabs>
    <Holder><NodeEditor key={tab} nodes={nodesForTab[tab]} ... /></Holder>
</>

[chrisjpatty]

@augusto3691 I'd definitely like to get you a better API to do this than to have to force re-render the component with a setTimeout. I'll get that added to my list of upcoming features.

[augusto3691]

hi @CyrilDelvalle-Actronika, we managed to do that with useEffect hooks:

...
const nodeEditor = React.useRef()
const [nodes, setNodes] = useState();
const [nodesInEditor, setNodesInEditor] = useState();
const [showNodeEditor, setShowNodeEditor] = useState(true);

useEffect(() => {
        if (nodes !== undefined) {
            setShowNodeEditor(false)
            setTimeout(() => {
                setShowNodeEditor(true)
            }, 1)
        }
}, [nodes])

...
return (
{
    showNodeEditor &&
    <NodeEditor
        ref={nodeEditor}
        portTypes={config.portTypes}
        nodeTypes={config.nodeTypes}
        onChange={setNodesInEditor}
        nodes={nodes}
    />
}
)

We are doing that to achieve a "save / load" system, maybe can help you :)

[augusto3691]

@chrisjpatty i agree with you that setTimeout is not the most elegant solution but for my pruposes is not affecting the user experience or the performance, your working is amazing, ansious by #74 hahahah