Merge pull request #7304 from zoran995/fix/react-ref

Use useRef instead of createRef in functional component

CHANGES.md

@@ -2,6 +2,7 @@
 
 #### next release (8.7.9)
 
+- Properly initialize react ref in functional components
 - [The next improvement]
 
 #### 8.7.8 - 2024-11-01

lib/ReactViews/Tools/ItemSearchTool/SearchResults.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import Mustache from "mustache";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useVirtual } from "react-virtual";
 import styled from "styled-components";
@@ -28,7 +28,7 @@ const SearchResults: React.FC<SearchResultsProps> = (props) => {
     currentMapEffect.is === "highlightSingleResult"
       ? currentMapEffect.result
       : undefined;
-  const parentRef = React.createRef<HTMLDivElement>();
+  const parentRef = useRef<HTMLDivElement>(null);
   const list = useVirtual({
     size: results.length,
     parentRef,

lib/ReactViews/Tools/PedestrianMode/MouseTooltip.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import styled from "styled-components";
 import Cartesian2 from "terriajs-cesium/Source/Core/Cartesian2";
 import Scene from "terriajs-cesium/Source/Scene/Scene";
@@ -11,7 +11,7 @@ type MouseTooltipProps = {
 
 const MouseTooltip: React.FC<MouseTooltipProps> = (props) => {
   const { scene, text } = props;
-  const tooltipText = createRef<typeof TooltipText>();
+  const tooltipText = useRef<typeof TooltipText>(null);
 
   useEffect(function tooltipFollowMouse() {
     const setTooltipPosition = (position: { x: number; y: number }) => {