Re-render the node editor dynamically

[CyrilDelvalle-Actronika]

Hello !

I'm looking for create a Tabbed navigation between nodes editor, but I don't fin any solution... I use Redux and I have multiple JSON file and I want to refresh the graph when I click on Tab. Someone knows a solution for re render dynamically the graph when one of these parameters change ?
nodes={ newNodes } comments= {newComments}

Thanks all for your answers !

[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 :)

[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]

@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 https://github.com/chrisjpatty/flume/pull/74 hahahah

[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>
</>