[DataGrid] Resolve the api ref at the same time as any other ref

[oliviertassinari]

Effectively, it means that we can stop documenting useApiRef, and replace it completely in the public API with:

function MyApp() {
  const apiRef = React.useRef();

  return <DataGrid apiRef={apiRef} />
}

It's a logical follow-up with the direction taken in #933. More details in #939 (comment). I like the approach, at least, it's sounds and consistent with the rest of the codebase. You can find the same API on, the Tabs for instance (action prop).

[dtassone]

I don't understand why we need an overload here, instead of an optional arg

[oliviertassinari]

There are two different and distinct use cases: internal, and developer-facing. Ideally, I think that we should create two different modules or rely on a simple ref developer-facing.

[dtassone]

Effectively, it means that we can stop documenting useApiRef, and replace it completely in the public API with:

function MyApp() {
  const apiRef = React.useRef();

  return <DataGrid apiRef={apiRef} />
}

It's a logical follow-up with the direction taken in #933. More details in #939 (comment). I like the approach, at least, it's sounds and consistent with the rest of the codebase. You can find the same API on, the Tabs for instance (action prop).

You're losing the type, it's better to use useApiRef

[oliviertassinari]

You're losing the type, it's better to use useApiRef

@dtassone I was hoping TypeScript could infer the correct type but I didn't test it. I work fine with HTML refs. So I don't see why it wouldn't in our case.

I believe the current types are also lying: https://codesandbox.io/s/material-demo-forked-256vk?file=/demo.tsx.

We can even do:

import * as React from "react";
import { XGrid, useApiRef } from "@material-ui/x-grid";
import { useDemoData } from "@material-ui/x-grid-data-generator";

export default function ApiRefPaginationGrid() {
  const apiRef = useApiRef();
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 10,
    maxColumns: 6
  });

  apiRef.current.setPage(2);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <XGrid pagination pageSize={5} apiRef={apiRef} {...data} />
    </div>
  );
}

without TypeScript complaining.

[oliviertassinari]

Another benefit of the approach, it allows the usage of the apiRef with class components: https://codesandbox.io/s/material-demo-forked-wvq55?file=/demo.tsx

[dtassone]

Another benefit of the approach, it allows the usage of the apiRef with class components: https://codesandbox.io/s/material-demo-forked-wvq55?file=/demo.tsx

Well that worked with the previous approach as well.
https://codesandbox.io/s/material-demo-forked-f1z26?file=/demo.tsx

[oliviertassinari]

Well that worked with the previous approach as well.

@dtassone It crashes on my end:

[dtassone]

Well that worked with the previous approach as well.

@dtassone It crashes on my end:

make sure you use the latest version of xgrid

[oliviertassinari]

https://codesandbox.io/s/material-demo-forked-f1z26?file=/demo.tsx

[dtassone]

https://codesandbox.io/s/material-demo-forked-f1z26?file=/demo.tsx

[oliviertassinari]

@dtassone Oh wow, so strange, same URL, different behavior for both of us 😆. @DanailH How does it behave in your env?

In any case, it's not that important. The motivation for the changes is to:

1. separate the useApiRef public developer side to the internal one, they serve different use cases since [DataGrid] Fix strict mode issue with apiRef #933. The internal one is the source of truth, the external is updating a parent ref.
2. use the idiomatic hook that React provides for the external use case (updating a parent ref).