overleaf/services/web/frontend/js/shared/hooks/use-detach-state-watcher.js

import { useEffect } from 'react'
import useDetachState from './use-detach-state'

export default function useDetachStateWatcher(
  key,
  stateValue,
  senderRole,
  targetRole
) {
  const [value, setValue] = useDetachState(
    key,
    stateValue,
    senderRole,
    targetRole
  )

  useEffect(() => {
    setValue(stateValue)
  }, [setValue, stateValue])

  return [value, setValue]
}