Flow doesn't re-render on elements state change
See original GitHub issue`const Body = () => {
const addChild = (parentId) => {
    setParent(parentId)
    setPopup(true)
}
let {chart, insertNode} = useChart(departmentData, addChild)
const onLoad = (reactFlowInstance) => reactFlowInstance.setTransform({x: 10, y: 10, zoom: 0.8})
const [popup, setPopup] = useState(false)
const [parent, setParent] = useState()
const reff = useClickOutside(() => setPopup(false))
console.log("Body render")
return (
    <Container>
        <FlowContainer>
            {chart.map(item => item.id).join(" ")}
            <FlowBorder>
                <ReactFlow 
                    onLoad={onLoad}
                    elements={chart} 
                    nodesDraggable={true} 
                    nodesConnectable={false}
                    nodeTypes={{department: DepartmentNode}}
                    >
                </ReactFlow>
                {popup && <PopupContainer>
                    <AddChildForm reff={reff} chart={chart} parentId={parent} onAdd={(data) => {setPopup(false); insertNode(data)}}/>
                </PopupContainer>}
            </FlowBorder>
        </FlowContainer>
    </Container>
)
}` “chart” is a React state returned from a custom hook, basically I’m trying to add new node to chart through a form. The text below “FlowContainer” renders fine but “ReactFlow” stays the same, the same nodes and edges from initial.
Issue Analytics
- State:
 - Created 2 years ago
 - Comments:21 (8 by maintainers)
 
Top Results From Across the Web
React-redux component does not rerender on store state ...
I'm stating to learn react and redux today, yet I cannot figure out how to force component to rerender after state change. Here...
Read more >Troubleshooting Guide - React Flow
This warning appears when the nodeTypes or edgeTypes properties change after the initial render. The nodeTypes or edgeTypes should only be changed dynamically ......
Read more >React Hooks - Understanding Component Re-renders - Medium
This state change triggers a re-render — invoking the TickerComponent function to execute again. But this time “useState('AAPL')” returns the ...
Read more >Just Say No to Excessive Re-Rendering in React - GrapeCity
Re-renders occur when a component's state or prop changes. When neither changes, no re-render occurs. Just like the initial render, ...
Read more >Reactivity for Fields, Objects, and Arrays
Lightning Web Components doesn't observe changes to the value of the Date object. To ensure that the template is rerendered when the value...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Fixed by initializing dagreGraph on each function call:
it works!