useStoreState Performance with transform

Hello dear react flow team, we recently had a hard time to overcome some performance issues while using useStoreState to get the transform value. Since we have a lot of sub-components which rely on our custom hooks that sometimes need to use the transform from react-flow to achieve our goals, we needed to split our hooks in terms of whether they used the store state to get the transform property. One of our problems was, that if a component needs data about the zoom level (transform[2]) we still got re-renderings since if transform changes, it also changes if we only need to use the zoom. So we created a custom hook that subscribes to transform with useStoreState and memoized the single values of transform(transform[0], transform[1], transform[2]), that helped a lot.

The second case which is still untackled and could be optimised would be the selector for transform. Of course useStoreState returns a new value whenever the tree is zoomed or moved. Since we need that for calculations when the user moves the tree around that is fine. But yet a delay of receiving the data would be great to improve performance a lot. Even if it is 0.1 seconds.

The two ideas to create a better performance in my opinion with react flow would be the following:

• Create a hook or a selector that only exports one memoized instance of transform
• Have the ability to receive the transform value after a defined timeout of seconds when the values has not been changed anymore (delayed callback)

[dominikspiertz]

Hello @moklick, no problem. I will create one tomorrow and send it here so you can see it

[moklick]

Hey @dominikspiertz

we just released v10, that doesn’t use Redux anymore but Zustand. With Zustand it’s possible to do transient updates. Maybe it helps here:

import { useStoreApi } from 'react-flow-renderer';

function Component() { 
  const store = useStoreApi(); 
  const tranform = useRef(store.getState().tranform)
 
 useEffect(() => store.subscribe(
    state => (tranform.current = state.tranform)
  ), [])

 // ... do something with transform.current