From 3ccd925d299bbadbeccfd532ef5da958db0be45f Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 11 May 2022 12:26:47 +0100
Subject: [PATCH] Merge pull request #7866 from overleaf/ae-createref

Replace createRef with useRef

GitOrigin-RevId: c037806acaa917a5aa7a41a6f07747bd24410de7
---
 .../components/file-tree-item/file-tree-item-inner.js         | 4 ++--
 .../frontend/js/features/outline/components/outline-item.js   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
index c0b4176ad3..341b8c7710 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
@@ -1,4 +1,4 @@
-import { useEffect, createRef } from 'react'
+import { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
@@ -24,7 +24,7 @@ function FileTreeItemInner({ id, name, isSelected, icons }) {
 
   const { isDragging, dragRef, setIsDraggable } = useDraggable(id)
 
-  const itemRef = createRef()
+  const itemRef = useRef()
 
   useEffect(() => {
     const item = itemRef.current
diff --git a/services/web/frontend/js/features/outline/components/outline-item.js b/services/web/frontend/js/features/outline/components/outline-item.js
index 55ff9b38af..f52aebdd8f 100644
--- a/services/web/frontend/js/features/outline/components/outline-item.js
+++ b/services/web/frontend/js/features/outline/components/outline-item.js
@@ -1,4 +1,4 @@
-import { useState, useEffect, createRef, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
 import classNames from 'classnames'
@@ -18,7 +18,7 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
   const { t } = useTranslation()
 
   const [expanded, setExpanded] = useState(true)
-  const titleElementRef = createRef()
+  const titleElementRef = useRef()
   const isHighlightedRef = useRef(false)
 
   const mainItemClasses = classNames('outline-item', {