[core] Rely on immutable ref when possible

mui · Jan 28, 2024 · 7e76367 · 7e76367
1 parent d00e1de
commit 7e76367
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/docs/data/data-grid/editing/CustomEditComponent.js b/docs/data/data-grid/editing/CustomEditComponent.js
@@ -11,7 +11,7 @@ function renderRating(params) {
 function RatingEditInputCell(props) {
   const { id, value, field, hasFocus } = props;
   const apiRef = useGridApiContext();
-  const ref = React.useRef();
+  const ref = React.useRef(null);
 
   const handleChange = (event, newValue) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });

diff --git 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.js b/docs/data/data-grid/performance/GridVisualization.js
@@ -6,7 +6,7 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 
 const TraceUpdates = React.forwardRef((props, ref) => {
   const { Component, ...other } = props;
-  const rootRef = React.useRef();
+  const rootRef = React.useRef(null);
   const handleRef = useForkRef(rootRef, ref);
 
   React.useEffect(() => {

diff --git 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
@@ -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.