diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js
index 2636ce6e16..7f13e0f010 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js
@@ -5,7 +5,7 @@ import { Alert } from 'react-bootstrap'
 import PdfViewerControls from './pdf-viewer-controls'
 import { useProjectContext } from '../../../shared/context/project-context'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
-import useScopeValue from '../../../shared/context/util/scope-value-hook'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { buildHighlightElement } from '../util/highlights'
 import PDFJSWrapper from '../util/pdf-js-wrapper'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-viewer.js b/services/web/frontend/js/features/pdf-preview/components/pdf-viewer.js
index 6015285e85..36f9cca10c 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-viewer.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-viewer.js
@@ -1,4 +1,4 @@
-import useScopeValue from '../../../shared/context/util/scope-value-hook'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { usePdfPreviewContext } from '../contexts/pdf-preview-context'
 import { lazy, memo, useEffect } from 'react'
 
diff --git a/services/web/frontend/js/features/pdf-preview/contexts/pdf-preview-context.js b/services/web/frontend/js/features/pdf-preview/contexts/pdf-preview-context.js
index 0e0bbb16f7..abd3fc5102 100644
--- a/services/web/frontend/js/features/pdf-preview/contexts/pdf-preview-context.js
+++ b/services/web/frontend/js/features/pdf-preview/contexts/pdf-preview-context.js
@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from '../../../shared/context/util/scope-value-hook'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { useProjectContext } from '../../../shared/context/project-context'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
 import {
diff --git a/services/web/frontend/js/shared/context/compile-context.js b/services/web/frontend/js/shared/context/compile-context.js
index 8186270ee4..36c694ab3a 100644
--- a/services/web/frontend/js/shared/context/compile-context.js
+++ b/services/web/frontend/js/shared/context/compile-context.js
@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 
 export const CompileContext = createContext()
 
diff --git a/services/web/frontend/js/shared/context/editor-context.js b/services/web/frontend/js/shared/context/editor-context.js
index 04627c3753..8f4c66db1e 100644
--- a/services/web/frontend/js/shared/context/editor-context.js
+++ b/services/web/frontend/js/shared/context/editor-context.js
@@ -6,7 +6,7 @@ import {
   useMemo,
 } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 import useBrowserWindow from '../hooks/use-browser-window'
 import { useIdeContext } from './ide-context'
 import { useProjectContext } from './project-context'
diff --git a/services/web/frontend/js/shared/context/layout-context.js b/services/web/frontend/js/shared/context/layout-context.js
index 4009cb7f37..035d4a07f6 100644
--- a/services/web/frontend/js/shared/context/layout-context.js
+++ b/services/web/frontend/js/shared/context/layout-context.js
@@ -1,6 +1,6 @@
 import { createContext, useContext, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 import { useIdeContext } from './ide-context'
 
 export const LayoutContext = createContext()
diff --git a/services/web/frontend/js/shared/context/project-context.js b/services/web/frontend/js/shared/context/project-context.js
index cf65dfd720..c7082bc69b 100644
--- a/services/web/frontend/js/shared/context/project-context.js
+++ b/services/web/frontend/js/shared/context/project-context.js
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 
 const ProjectContext = createContext()
 
diff --git a/services/web/frontend/js/shared/context/user-context.js b/services/web/frontend/js/shared/context/user-context.js
index b3113bc7f1..4809c1a9a4 100644
--- a/services/web/frontend/js/shared/context/user-context.js
+++ b/services/web/frontend/js/shared/context/user-context.js
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 
 export const UserContext = createContext()
 
diff --git a/services/web/frontend/js/shared/context/util/scope-value-hook.js b/services/web/frontend/js/shared/hooks/use-scope-value.js
similarity index 80%
rename from services/web/frontend/js/shared/context/util/scope-value-hook.js
rename to services/web/frontend/js/shared/hooks/use-scope-value.js
index 3418b4bfc7..843c4a9368 100644
--- a/services/web/frontend/js/shared/context/util/scope-value-hook.js
+++ b/services/web/frontend/js/shared/hooks/use-scope-value.js
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
-import { useIdeContext } from '../ide-context'
+import { useIdeContext } from '../context/ide-context'
 
 /**
  * Binds a property in an Angular scope making it accessible in a React
@@ -23,7 +23,11 @@ export default function useScopeValue(path, deep = false) {
     return $scope.$watch(
       path,
       newValue => {
-        setValue(deep ? _.cloneDeep(newValue) : newValue)
+        setValue(() => {
+          // NOTE: this is deliberately wrapped in a function,
+          // to avoid calling setValue directly with a value that's a function
+          return deep ? _.cloneDeep(newValue) : newValue
+        })
       },
       deep
     )
diff --git a/services/web/frontend/stories/pdf-js-viewer.stories.js b/services/web/frontend/stories/pdf-js-viewer.stories.js
index ca140b8ee3..85528f2d3f 100644
--- a/services/web/frontend/stories/pdf-js-viewer.stories.js
+++ b/services/web/frontend/stories/pdf-js-viewer.stories.js
@@ -5,7 +5,7 @@ import { Button } from 'react-bootstrap'
 import { useCallback } from 'react'
 import { withContextRoot } from './utils/with-context-root'
 import { setupContext } from './fixtures/context'
-import useScopeValue from '../js/shared/context/util/scope-value-hook'
+import useScopeValue from '../js/shared/hooks/use-scope-value'
 
 setupContext()