Warning: ReferenceField: Support for defaultProps will be removed from function components

[beck24]

What you were expecting:
A clean console with no warnings about defaultProps

What happened instead:
The console contains warnings about various react-admin components:

Warning: ReferenceField: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Warning: ListActions: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

I expect there's probably more, I'm still evaluating and working through the tutorials for react-admin

Steps to reproduce:
Use react-admin in the Nextjs app router as per the documentation here: https://marmelab.com/react-admin/NextJs.html

Related code:
Just the code from the documentation using the jsonplaceholder API and Guessers

Environment

• React-admin version: 4.12.1
• Last version that did not exhibit the issue (if applicable): Unknown
• React version: 18.2.0
• Browser: Chrome Version 114.0.5735.199 (Official Build) (64-bit)
• Stack trace (in case of a JS error):

Warning: ListActions: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at ListActions (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/list/ListActions.js:77:27)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at Toolbar (webpack-internal:///(app-client)/./node_modules/@mui/material/Toolbar/Toolbar.js:68:82)
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at eval (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/list/ListToolbar.js:43:25)
    at div
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ListView (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/list/ListView.js:61:20)
    at ListViewGuesser (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/list/ListGuesser.js:71:71)
    at ListContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/controller/list/ListContextProvider.js:44:20)
    at ResourceContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/core/ResourceContextProvider.js:30:23)
    at ListBase (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/controller/list/ListBase.js:60:23)
    at ListGuesser (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/list/ListGuesser.js:66:26)
    at RenderedRoute (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:553:5)
    at Routes (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:1184:5)
    at ResourceContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/core/ResourceContextProvider.js:30:23)
    at Resource (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/core/Resource.js:16:24)
    at RenderedRoute (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:553:5)
    at Routes (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:1184:5)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:69:37)
    at div
    at main
    at div
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at Layout (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/layout/Layout.js:53:20)
    at div
    at RenderedRoute (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:553:5)
    at Routes (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:1184:5)
    at CoreAdminRoutes (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/core/CoreAdminRoutes.js:22:79)
    at RenderedRoute (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:553:5)
    at Routes (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:1184:5)
    at CoreAdminUI (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/core/CoreAdminUI.js:20:20)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at ScopedCssBaseline (webpack-internal:///(app-client)/./node_modules/@mui/material/ScopedCssBaseline/ScopedCssBaseline.js:65:82)
    at AdminUI (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/AdminUI.js:44:17)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:42:5)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:54:5)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@mui/material/styles/ThemeProvider.js:26:14)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/layout/Theme/ThemeProvider.js:38:23)
    at ResourceDefinitionContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/core/ResourceDefinitionContext.js:61:17)
    at NotificationContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/notification/NotificationContextProvider.js:23:23)
    at I18nContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/i18n/I18nContextProvider.js:19:17)
    at Router (webpack-internal:///(app-client)/./node_modules/react-router/dist/index.js:1122:15)
    at HistoryRouter (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/routing/HistoryRouter.js:16:23)
    at InternalRouter (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/routing/AdminRouter.js:33:23)
    at BasenameContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/routing/BasenameContextProvider.js:19:23)
    at AdminRouter (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/routing/AdminRouter.js:22:22)
    at QueryClientProvider (webpack-internal:///(app-client)/./node_modules/react-query/es/react/QueryClientProvider.js:39:21)
    at PreferencesEditorContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/preferences/PreferencesEditorContextProvider.js:12:23)
    at StoreContextProvider (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/store/StoreContextProvider.js:12:20)
    at CoreAdminContext (webpack-internal:///(app-client)/./node_modules/ra-core/dist/esm/core/CoreAdminContext.js:33:30)
    at AdminContext (webpack-internal:///(app-client)/./node_modules/ra-ui-materialui/dist/esm/AdminContext.js:38:23)
    at Admin (webpack-internal:///(app-client)/./node_modules/react-admin/dist/esm/Admin.js:100:30)
    at App (webpack-internal:///(app-client)/./app/page.tsx:18:82)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:324:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:104:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:213:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:334:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:70:9)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:51:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:318:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:150:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:77:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:104:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:395:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:166:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:182:11)```

[slax57]

Thanks for the report.

Indeed there are still a few components that use defaultProps here and there for historic reason, but they should be the exception rather than the rule.

In any case, you are 100% correct that we should get rid of them as they are tech debt.

We'll do that when we can. In the meantime, this could be a good first issue for anyone willing to contribute 🙂

[fzaninotto]

Some of the defaultProps will still be required, e.g. textAlign in NumberField because the parent layout (<Datagrid>). does child prop inspection to enable / disable certain features. And there is no easy way to do the same without defaultProps, so some of these warnings will remain in the current major version of react-admin.