[data grid] DataGrid gives warning about apiRef.current

[entaildevops]

The problem in depth

I am using DataGridPro in Dialog. When the dialog is opened for a second time, the following warning is printed to console:

"Warning: Failed prop type: The prop apiRef.current is marked as required in ForwardRef(DataGridPro), but its value is null."

Here is a simplified demo that demonstrates the issue. I also made a code sandbox demo.

I have a parent component for controlling when the dialog is open/closed.

import { useState } from 'react'
import { TestGrid } from './TestGrid'
import { Box, Button } from '@mui/material';

export const ParentComponent = () => {
  const [dialogOpen, setDialogOpen] = useState<boolean>(false);

  return (
    <Box>
        <Button onClick={() => setDialogOpen(true)}>Open dialog</Button>
        <TestGrid onCloseDialog={()=> setDialogOpen(false)} dialogOpen={dialogOpen}/>
    </Box>
  )
}

And a child component for the actual dialog and DataGrid:

import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
import { GridColDef, useGridApiRef } from '@mui/x-data-grid-pro';
import { DataGridPro } from '@mui/x-data-grid-pro';

interface TestGridProps {
    dialogOpen: boolean;
    onCloseDialog: () => void;  
  }

export const TestGrid = (props: TestGridProps) => {
  const apiRef = useGridApiRef(); //on SECOND time the dialog is opened this is null for a brief moment and this causes a warning "Warning: Failed prop type: The prop `apiRef.current` is marked as required in `ForwardRef(DataGridPro)`, but its value is `null`."
  console.log('apiRef', apiRef)

  const columns: GridColDef[] = [
    { field: 'id', headerName: 'Id', width:10 }, 
    { field: 'name', headerName: "Name", width: 150 },        
  ];
  
  const rows = [
    {id: 1, name: "Foo"},
    {id: 2, name: "Bar"}
  ]
  const handleClose = () => {
    props.onCloseDialog();   
  }

  const handleDelete = () => {
    apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
  }

  return (
    <Dialog
        maxWidth='md'
        fullWidth                
        open={props.dialogOpen}        
        onClose={handleClose}>
        <DialogTitle>Test Grid</DialogTitle>
        <DialogContent>
        <DataGridPro 
            apiRef={apiRef}      
            columns={columns}
            rows={rows}
        />
        </DialogContent>
        <DialogActions>
            <Button onClick={handleDelete}> Delete first row</Button>
            <Button onClick={handleClose}>Close</Button>            
        </DialogActions>
    </Dialog>
  )
}

Please explain why the apiRef becomes null briefly when the dialog is reopened and causes the warning. The functionality seems fine though, but I would like to get rid of the warning (and also understand the reason for it). Thanks!

Your environment

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.86)
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.20
@mui/icons-material: ^5.15.20 => 5.15.20
@mui/material: ^5.15.20 => 5.15.20
@mui/private-theming: 5.15.20
@mui/styled-engine: 5.15.14
@mui/system: 5.15.20
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-data-grid: ^7.6.2 => 7.22.2
@mui/x-data-grid-pro: ^7.22.2 => 7.22.2
@mui/x-date-pickers: ^7.16.0 => 7.16.0
@mui/x-internals: 7.16.0
@mui/x-license: 7.21.0
@types/react: ^18.2.66 => 18.3.3
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
typescript: ^5.2.2 => 5.4.5

problem is reproduced on both Edge and Chrome

Search keywords: apiRef.current
Order ID: 98745

[michelengelen]

Hey @entaildevops ... could you make that codesandbox public please?
I'll be glad to help afterwards! :D

[entaildevops]

@michelengelen done =)