Toolbad CRUD Datagrid: Can't perform a React state update on a component that hasn't mounted yet

[teetlaja]

Steps to reproduce

I'm using NextJS with server actions to fetch data. Using Prisma for db queries, and then created page.tsx for component and data.tsx to fetch the data to the client side, define all the types and other functions required to initialize CRUD. The code is incomplete, but getMany is complete.

The code renders, but I get errors all the time and am afraid that production might break completely. (App is still in development and will be for longer time, but want to get rid of it anyway).

The situation:

Code for page.tsx
`'use client'

import { Crud } from '@toolpad/core'

import {
organizationCache,
OrganizationDataModel,
organizationDataSource,
} from './data'

export default function OrganizationCrud () {

return <Crud
dataSource={organizationDataSource}
dataSourceCache={organizationCache}
rootPath="/organizations"
initialPageSize={10}
/>
}
`

And the data.tsx (pay attention that currently only getMany is completed, createOne etc are still WIP.
`'use client'
import { DataModel, DataSource, DataSourceCache } from '@toolpad/core'

import { Factory, Organization, Prisma } from '@repo/db'
import {
createOrganization, deleteOrganization,
getOrganization, getOrganizations,
updateOrganization,
} from '@/actions/organization'
import { notFound } from 'next/navigation'
import { Box, Chip } from '@mui/material'

// const singleOrg = use(selectedOrg)
export type OrganizationDataModel = Organization & DataModel & {
factories?: Factory[]
}

export const organizationDataSource: DataSource = {
fields: [
{ field: 'id', headerName: 'ID', type: 'number' },
{ field: 'name', headerName: 'Name', flex: 1 },
{
field: 'factories',
headerName: 'Factories',
type: 'singleSelect',
flex: 1,
valueOptions: row => {
return row.row.factories.map((factory: Factory) => ({
value: factory.id,
label: factory.name,
}))
},
renderCell: (row) => {
return <Box display={'flex'} gap={2} height={'100%'}
alignItems={'center'}>
{row.row.factories.map((factory: Factory) => (

        <Chip key={factory.id} label={factory.name} size="small"
              href={`/factories/${factory.id}`} clickable component={'a'}/>
      ))}
    </Box>
  },
},

],

getMany: async () => {
const organizations = await getOrganizations()
return {
items: organizations as OrganizationDataModel[],
itemCount: organizations.length,
}
},

getOne: async (id) => {
const org = await getOrganization(Number(id))
if (!org) {
notFound()
}
return org as OrganizationDataModel
},

createOne: async (data) => {
const created = await createOrganization(
data as Prisma.OrganizationCreateInput,
)
return {
...created,
externalId: created.externalId,
factories: [],
}
},

updateOne: async (id, data: Prisma.OrganizationUpdateInput) => {
return await updateOrganization(id as Organization['id'],
data)
},

deleteOne: async (id) => {
await deleteOrganization(id as number)
},

// validate: (formValues) => {
//
// // Simple sample validation (replace condition/message as needed)
// if (!formValues.name || String(formValues.name).trim() === '') {
// return {
// error: 'Name is required',
// values: formValues,
// }
// }
// return { values: formValues }
// },
}

export const organizationCache = new DataSourceCache()
`

Haven't found solution anywhere, I have tried previously useEffect, wrapping data fetching into parent server component, also the server component function declaring with use in client component. All of that gives same issues.

Current behavior

Expected behavior

That DataGrid rendering wouldn't give errors in console about the data changes.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.4.1
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 9.0.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 135.0.7049.115
    Edge: Not Found
    Safari: 18.4
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/icons-material: ^7.0.2 => 7.0.2 
    @mui/material: ^7.0.2 => 7.0.2 
    @mui/material-nextjs: ^7.0.2 => 7.0.2 
    @toolpad/core: ^0.14.0 => 0.14.0 
    @types/react: 19.1.2 => 19.1.2 
    react: ^19.1.0 => 19.1.0 
    react-dom: ^19.1.0 => 19.1.0 
    typescript: 5.8.3 => 5.8.3 

Search keywords: toolpad, datagrid, crud

[apedroferreira]

Hi, thanks for reporting this, I've seen it before and I can reproduce it.

It's nothing on your side, but something wrong in our component's internal logic. Looking into it.