question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 2 years ago
  • Comments:21 (8 by maintainers)

github_iconTop GitHub Comments

4reactions
baptisteArnocommented, Jun 3, 2021

Fixed by initializing dagreGraph on each function call:

const getLayoutedElements = (elements: FlowElement[]) => {
  const dagreGraph = new dagre.graphlib.Graph();
  dagreGraph.setDefaultEdgeLabel(() => ({}));
  dagreGraph.setGraph({ rankdir: "TB" });
  const width = 200;
  const height = 100;
  [...]
};
1reaction
gaomAndximicommented, Mar 7, 2022

Fixed by initializing dagreGraph on each function call:

const getLayoutedElements = (elements: FlowElement[]) => {
  const dagreGraph = new dagre.graphlib.Graph();
  dagreGraph.setDefaultEdgeLabel(() => ({}));
  dagreGraph.setGraph({ rankdir: "TB" });
  const width = 200;
  const height = 100;
  [...]
};

it works!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found