From 65c24cc02fd4b5734746f645560afe4aa1e86d1a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 28 Jan 2024 14:37:27 +0100
Subject: [PATCH] [core] Rely on immutable ref when possible

---
 docs/data/data-grid/editing/CustomEditComponent.tsx       | 2 +-
 docs/data/data-grid/performance/GridVisualization.tsx     | 2 +-
 .../hooks/features/columnResize/useGridColumnResize.tsx   | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/data/data-grid/editing/CustomEditComponent.tsx b/docs/data/data-grid/editing/CustomEditComponent.tsx
index dc0f84cd97f1e..63d036378717a 100644
--- a/docs/data/data-grid/editing/CustomEditComponent.tsx
+++ b/docs/data/data-grid/editing/CustomEditComponent.tsx
@@ -16,7 +16,7 @@ function renderRating(params: GridRenderCellParams<any, number>) {
 function RatingEditInputCell(props: GridRenderCellParams<any, number>) {
   const { id, value, field, hasFocus } = props;
   const apiRef = useGridApiContext();
-  const ref = React.useRef<HTMLElement>();
+  const ref = React.useRef<HTMLElement>(null);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number | null) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
diff --git a/docs/data/data-grid/performance/GridVisualization.tsx b/docs/data/data-grid/performance/GridVisualization.tsx
index 51781f6abc4c5..f40abc5a5cc59 100644
--- a/docs/data/data-grid/performance/GridVisualization.tsx
+++ b/docs/data/data-grid/performance/GridVisualization.tsx
@@ -6,7 +6,7 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 
 const TraceUpdates = React.forwardRef<any, any>((props, ref) => {
   const { Component, ...other } = props;
-  const rootRef = React.useRef<HTMLElement>();
+  const rootRef = React.useRef<HTMLElement>(null);
   const handleRef = useForkRef(rootRef, ref);
 
   React.useEffect(() => {
diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
index eb0f0835cf816..db4b14c046074 100644
--- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
+++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -284,14 +284,14 @@ export const useGridColumnResize = (
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
 
   const colDefRef = React.useRef<GridStateColDef>();
-  const columnHeaderElementRef = React.useRef<HTMLDivElement>();
-  const headerFilterElementRef = React.useRef<HTMLDivElement>();
+  const columnHeaderElementRef = React.useRef<HTMLDivElement | null>(null);
+  const headerFilterElementRef = React.useRef<HTMLDivElement | null>(null);
   const groupHeaderElementsRef = React.useRef<Element[]>([]);
   const cellElementsRef = React.useRef<Element[]>([]);
   const leftPinnedCellsAfterRef = React.useRef<HTMLElement[]>([]);
   const rightPinnedCellsBeforeRef = React.useRef<HTMLElement[]>([]);
-  const fillerLeftRef = React.useRef<HTMLElement>();
-  const fillerRightRef = React.useRef<HTMLElement>();
+  const fillerLeftRef = React.useRef<HTMLElement | null>(null);
+  const fillerRightRef = React.useRef<HTMLElement | null>(null);
 
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.