[data grid] `gridFilterModelSelector` is crashing when used in the render of the component calling the data grid

[ARCRM]

trafficstars

Order ID 💳

48127

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

I need to get the current filter model. I find the gridFilterModelSelector api from the documentation.

.

I used the "useGridApiRef" because I need to get it from outside of the grid and pass it to the gridFilterModelSelector.

`

const apiRef = useGridApiRef();
gridFilterModelSelector(apiRef)


    return (
        <MainCard
            content={false}
            title="Maisons"
        >
             <Box sx={{ 
                height: 700, 
                width: '100%',
              }}>
                <DataGridPro
                    apiRef={apiRef}   
                    localeText={language}
                    pagination
                    rows={tableData}
                    columns={GetColumns()}
                    pageSize={20}
                    rowsPerPageOptions={[20]}
                    checkboxSelection
                    disableSelectionOnClick
                    components={{ 
                      Pagination: CustomPagination,
                      Toolbar: CustomToolbar
                    }}
                    initialState={{
                        columns: {
                          columnVisibilityModel: {
                            id: false,
                          },
                        },
                    }} 
                    onFilterModelChange={(newFilterModel) => console.log(newFilterModel)}  
                />
            </Box>   
        </MainCard>
    );

`

I got this error:

Your environment 🌎

`npx @mui/envinfo`

  @emotion/react: ^11.7.1 => 11.10.0
    @emotion/styled: ^11.6.0 => 11.10.0
    @mui/base:  5.0.0-alpha.69
    @mui/icons-material: ^5.4.1 => 5.4.2
    @mui/lab: ^5.0.0-alpha.68 => 5.0.0-alpha.69
    @mui/material: ^5.4.1 => 5.4.2
    @mui/private-theming:  5.4.2
    @mui/styled-engine:  5.4.2
    @mui/styles: ^5.4.1 => 5.4.2
    @mui/system: ^5.4.1 => 5.4.2
    @mui/types:  7.1.2
    @mui/utils: ^5.4.1 => 5.4.2
    @mui/x-data-grid: ^5.5.0 => 5.14.0
    @mui/x-data-grid-pro: ^5.14.0 => 5.14.0
    @mui/x-date-pickers:  5.0.0-beta.3
    @mui/x-date-pickers-pro: ^5.0.0-beta.3 => 5.0.0-beta.3
    @mui/x-license-pro: ^5.14.0 => 5.14.0
    @types/react:  17.0.39
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.5.5 => 4.5.5

[flaviendelangle]

You can't use the selector in the render outside of the grid because during the 1st render, the state is not defined yet. Which is why you are seeing this error.

Depending on your use case you could

1. Use the selector inside the scope of the grid with useGridSelector (see this doc section)
2. Use the selector in a useEffect / useCallback to only call it when you actually need it
3. Call it conditionally in the render but not during the 1st render (it's a bit hacky and you most likely have a better solution)