Merge pull request #7866 from overleaf/ae-createref

Replace createRef with useRef

GitOrigin-RevId: c037806acaa917a5aa7a41a6f07747bd24410de7

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

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', {