diff --git a/docs/docs/core/content-manager/hooks/use-callback-ref.mdx b/docs/docs/core/content-manager/hooks/use-callback-ref.mdx
new file mode 100644
index 0000000000..b613be0294
--- /dev/null
+++ b/docs/docs/core/content-manager/hooks/use-callback-ref.mdx
@@ -0,0 +1,44 @@
+---
+title: useCallbackRef
+description: API reference for the useCallbackRef hook in Strapi's Content Manager
+tags:
+  - content-manager
+  - hooks
+  - refs
+  - callbacks
+  - effects
+---
+
+A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+prop or avoid re-executing effects when passed as a dependency. Helpful for working with `modifiedData`
+or `initialData` in the content-manager.
+
+Stolen from [`@radix-ui/react-use-callback-ref`](https://www.npmjs.com/package/@radix-ui/react-use-callback-ref).
+
+## Usage
+
+```jsx
+import { useCallbackRef } from 'path/to/hooks';
+
+const MyComponent = ({ callbackFromSomewhere }) => {
+  const mySafeCallback = useCallbackRef(callbackFromSomewhere);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      mySafeCallback(event);
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [mySafeCallback]);
+
+  return <div>{children}</div>;
+};
+```
+
+## Typescript
+
+```ts
+function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T;
+```
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 880d3b3898..2406f91527 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -36,6 +36,11 @@ const sidebars = {
               type: 'category',
               label: 'Hooks',
               items: [
+                {
+                  type: 'doc',
+                  label: 'useCallbackRef',
+                  id: 'core/content-manager/hooks/use-callback-ref',
+                },
                 {
                   type: 'doc',
                   label: 'useDragAndDrop',