[DataGrid] Initialize apiRef early

[cherniavskii]

I need this for #11164, where I use apiRef in the sortComparator for the grouping column + sortingModel in the initialState.
The demo throws an error, because when initial sorting happens the apiRef is not initialized yet (this is also the reason why Netlify deployment fails)

A simpler example to illustrate the issue:
Before: https://codesandbox.io/p/sandbox/gallant-wu-gh2svt
After: https://codesandbox.io/p/sandbox/heuristic-spence-nmkx2w

[flaviendelangle]

React tells us not to do that due to concurrent rendering 😬

https://react.dev/learn/referencing-values-with-refs

With that being said, we are doing it in useLazyRef
I think it's dangerous if we do it and the value depend on the props (since they might be invalid in the 1st real render of the concurrent mode).

[mui-bot]

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

Generated by 🚫 dangerJS against 8aec690

[cherniavskii]

React tells us not to do that due to concurrent rendering 😬
https://react.dev/learn/referencing-values-with-refs

I don't see concurrent rendering mentioned on that page.
It does say this though:

Don’t read or write ref.current during rendering. If some information is needed during rendering, use state instead. Since React doesn’t know when ref.current changes, even reading it while rendering makes your component’s behavior difficult to predict. (The only exception to this is code like if (!ref.current) ref.current = new Thing() which only sets the ref once during the first render.)

https://react.dev/learn/referencing-values-with-refs#best-practices-for-refs

And I think this PR falls under the exception mentioned above - it's only assigned once because of the !inputApiRef.current?.state check.
Does this make sense?

[cherniavskii]

It's not related to this PR, it's just a fix for the flaky test that fails from time to time: https://app.circleci.com/pipelines/github/mui/mui-x/49318/workflows/26e5b314-bb45-4771-8095-330e1f96670b/jobs/282851
It failed again in this PR, this is why I added a fix here.

[flaviendelangle]

From what I understand, the reason behind the fact that we should not mutate the ref in the render is the concurrent mode, at least that's what this Stackoverflow answers thinks.
It links to another doc page: https://react.dev/reference/react/useRef#caveats, which states the following:

Do not write or read ref.current during rendering, except for initialization. This makes your component’s behavior unpredictable.

Once again, in the doc there is no explicit mention of why you should not do it, just some blurry words like "behavior unpredictable".
But in any case, what you are doing looks like an initialization so I guess it is safe.

[romgrk]

LGTM. I don't think those notes in the react docs are applicable to us.

[Rickardo228]

This error is thrown when trying to use DataGrid (v7.3.0) with react testing library.

Specifically, I'm rendering a custom slot for a cell. The cell component calls:
const apiRef = useGridApiContext();

The test itself uses the render method to render the DataGrid import { render, RenderOptions } from '@testing-library/react'

render( <DataGrid ... /> )

[romgrk]

Open a new issue with details, make sure to search past issues for a duplicate.