[DataGrid] Revert apiRef to be MutableRefObject for React versions < 19

[arminmeh]

Manual cherry-pick of #16279

[mui-bot]

Deploy preview: https://deploy-preview-16320--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 7d8d0d7

[igortas]

@arminmeh Still issue for React 18.x

Type 'RefObject<GridApiPremium>' is not assignable to type 'MutableRefObject<GridApiPremium>'.
  Types of property 'current' are incompatible.
    Type 'GridApiPremium | null' is not assignable to type 'GridApiPremium'.
      Type 'null' is not assignable to type 'GridApiPremium'.

[arminmeh]

@igortas is this with version 7.24.1?
I have just tried it out and the hook returns MutableRefObject for React 18

[igortas]

@arminmeh yes, I've tried with clean node_modules and pnpm.lock, with latest pnpm

[arminmeh]

can you post your npx @mui/envinfo here?

[evagmAW]

I get the same issue as well but for DataGridPro.

react:  18.3.1
@mui/material: 5.16.7
@mui/x-data-grid-pro: 7.24.1

[damisparks]

@arminmeh I am having the same issue.

Argument of type 'RefObject<GridApiPro>' is not assignable to parameter of type 'MutableRefObject<GridApiCommon<any, any>>'.
  Types of property 'current' are incompatible.
    Type 'GridApiPro | null' is not assignable to type 'GridApiCommon<any, any>'.
      Type 'null' is not assignable to type 'GridApiCommon<any, any>'.ts(2345)
const gridApiContext: React.RefObject<GridApiPro>

my npx @mui/envinfo is:

  System:
    OS: macOS 15.2
  Binaries:
    Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.265
    Edge: 132.0.2957.115
    Safari: 18.2
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled: ^11.11.5 => 11.14.0 
    @mui/base: ^5.0.0-beta.46 => 5.0.0-beta.69 
    @mui/core-downloads-tracker:  5.16.14 
    @mui/icons-material: ^5.15.18 => 5.16.14 
    @mui/material: ^5.15.18 => 5.16.14 
    @mui/private-theming:  6.4.1 
    @mui/styled-engine:  6.4.0 
    @mui/system:  6.4.1 
    @mui/types:  7.2.21 
    @mui/utils: ^5.15.14 => 5.16.14 
    @mui/x-data-grid:  7.24.1 
    @mui/x-data-grid-pro: ^7.7.0 => 7.24.1 
    @mui/x-date-pickers:  7.24.1 
    @mui/x-date-pickers-pro: ^7.11.1 => 7.24.1 
    @mui/x-internals:  7.24.1 
    @mui/x-license: ^7.0.0 => 7.24.1 
    @mui/x-tree-view:  7.24.1 
    @mui/x-tree-view-pro: ^7.12.0 => 7.24.1 
    @types/react: ^18.2.79 => 18.3.18 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.6.2 => 5.7.3 

[arminmeh]

Found the problem

It is only appearing in Pro and Premium packages
The type that we cast to here is not kept in the build process here. The type is evaluated to React.RefObject and as such added to the declaration file.

I will open a PR with the fix.
In the meantime, feel free to cast the return type from the useGridApiRef hook to React.MutableRefObject if you are on React 18 and using Pro or Premium package.

[damisparks]

@arminmeh Could we have the PR link?
I would like to have it for internal tracking on my side. I will really appreciate it.

[arminmeh]

Here is the PR with the fix

[NathanVeeva]

@arminmeh After updating to 7.24.1, I'm still getting this error. I dive into the code in the the node_modules and see it's still using React.RefObject. My app is using React 18.3.1.

[arminmeh]

@NathanVeeva the linked PR is merged but not released yet. It should be released by the end of this week.
Problem was with the type evaluation for Pro and Premium packages (with React < 19)
You can cast to React.MutableRefObject until the fix is released in the new version. This is what the type will become afterwards.

[NathanVeeva]

@arminmeh I see this got pushed through with #16348 which seems to work for useGridApiRef, though wondering if there was a fix for this when using useGridApiContext or a related ticket. As this following code snippet still results in a TS error (reference implementation here):

const apiRef = useGridApiContext();
useGridSelector(apiRef, gridFilterModelSelector);

[arminmeh]

@NathanVeeva thanks for reporting
Yes, I see that the same issue that was fixed by #16348 for useGridApiRef() also exists for useGridApiContext()
Again, this should only affect Pro and Premium packages on React < 19.

I will create a PR with the fix.
Same as for the fixed hook, you can cast the type for now.

Update:
Here is the PR with the fix