How I significantly improved perf on my massive workflows

[badsyntax]

ReactFlow is such a useful library, many thanks to the authors and community.

Recently I've been struggling a bit to optimise my custom nodes. On massive workflows dragging nodes (especially many nodes at the same time) was rather leggy. Here's how I was able to resolve that.

At first I used React Scan and Million lint to identify excessive re-renders, then would try optimise those components. I identified many areas of improvement and with the use of startTransition(), useDeferredValue() and memo(), this resulted in a much more performant UI, but dragging massive workflows was still laggy, as I had not optimised efficiently (apparently).

I then tried something else that massively improved perf "at the flick of a switch": the React Compiler. Enabling the compiler on my custom nodes has effectively resolved most of the remaining perf issues, and dragging massive workflows is close to buttery smooth now. I've now learnt that the compiler is smarter than me.

In conclusion

• Depending on the context, startTransition() can resolve perf issues related to (synchronous/blocking) state updates. Eg: "I want to update some state on drag without affecting the drag performance"
• useDeferredValue() allows you to react to state once that state has "stabilised". Eg if you're running a useEffect() on some state, useDeferredValue() can help with deferring those side effects
• React Compiler can highly optimise your nodes and result in significant perf gains!

[moklick]

Hey @badsyntax

Thanks for sharing your insights :) @peterkogo and I just talked about how we could use the new hooks for improving performance. Unfortunately we still support React 17. When the time comes (probably in a few weeks or months) we will start to work on a new version that drops support for React 17. Hopefully we can find some ways to improve the UX for larger flows then :)

[badsyntax]

Awesome 😎 I've been rather impressed with the new React APIs and tools to improve perf. Would be great to see improved perf in ReactFlow core if possible.