Improve performance and add memorization #130
Conversation
| @@ -241,6 +240,14 @@ export const Node: FC<Partial<NodeProps>> = ({ | |||
| } | |||
| }); | |||
|
|
|||
| useEffect(() => { | |||
There was a problem hiding this comment.
Can you provide some context on this change?
There was a problem hiding this comment.
When dragging, checkNodeLinkable is working for each node on the tree, with the condition "enteredNode?.id === properties.id" - only for the node, that is the drop target
src/symbols/Node/Node.tsx
Outdated
| } | ||
| }) | ||
| } | ||
| onMouseEnter={event => { |
src/symbols/Node/Node.tsx
Outdated
| onKeyDown = null, | ||
| onEnter = null, | ||
| onLeave = null | ||
| onClick = () => undefined, |
There was a problem hiding this comment.
Wouldn't it be more ideal to leave these null or undefined and then do something like onClick.?()?
|
Looks awesome overall, few questions but otherwise great! |
| setIsLinkable(checkNodeLinkable(properties, enteredNode, canLinkNode)); | ||
| } | ||
|
|
||
| return () => setIsLinkable(true); |
There was a problem hiding this comment.
should this be returning a function, or just setIstLinkable(true)
There was a problem hiding this comment.
IsLinkable - boolean, it's callback for cleaning after node unmounted, so just a 'true'
|
@Nerevar123 - Released in 4.2.14! |
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the new behavior?
Hi @amcdnl, I checked all the Canvas & Node props and added memorization where the props are causing re-render every time. It`s not solve the problem completely yet, but the app works much faster with memorization.
I also added a new story with 30 nodes, all possible props are written in it, adding them prevents re-renders (something is wrong with the default values)
P.S.
I think the main problem is that there is a strong connection between Canvas and nodes, every change in the canvas leads to a re-rendering of all the nodes. You can check this by dragging one node to another once with React Profiler started in the new 30 nodes story. This action causes ~ 30 re-renders without any visible changes on the screen.
Does this PR introduce a breaking change?