Is it safe to mutate a ref in the render phase?

[vlad-khitev-axon]

This library uses useSyncedRef extensively.

React docs recommend avoiding updating the ref during the render phase except for initialization (docs reference). For example:

// This might be unsafe const useHook = () => { const ref = useRef(null) ref.current = value } // One-time initialization is safe const useHook = () => { const ref = useRef(null) if (ref.current === null) { ref.current = value } }

According to this answer on StackOverflow, the problem can arise when working with React concurrent mode. If it's enabled, and the render phase gets interrupted, the ref value can end up out of sync with the actual state of the component. I'm unsure how this library will behave in practice when someone enables the concurrent mode.

The modern competitor library usehooks never mutates the ref in the render function, except for adding some properties in useSet and useMap.

So, how safe is useSyncedRef?