Upgrading to v4

-import { createAdminStore, Admin } from 'react-admin';
+import { Admin } from 'react-admin';
+import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

const App = () => (
    <Provider
-       store={createAdminStore({
-           authProvider,
-           dataProvider,
-           history,
-           customReducers,
-       })}
+       store={createStore(combineReducers(customReducers))}
    >
        <Admin
            authProvider={authProvider}
            dataProvider={dataProvider}
            history={history}
            title="My Admin"
        >
            ...
        </Admin>
    </Provider>
);

import customReducers from './customReducers';
+import { createStore, combineReducers } from 'redux';
+import { Provider } from 'react-redux';

const App = () => (
+   <Provider store={createStore(combineReducers(customReducers))}>
        <Admin
            dataProvider={dataProvider}
-           customReducers={customReducers}
        >
            ...
        </Admin>
+   </Provider>
);

-import { Admin } from 'react-admin';
+import { Admin, localStorageStore } from 'react-admin';

+const store = localStorageStore();
+store.setItem('sidebar.open', false);

const App = () => (
    <Admin
        dataProvider={dataProvider}
-       initialState={{ admin : { ui: { sidebarOpen: false } } }}
+       store={store}
    >
        ...
    </Admin>
);

import * as React from "react";
-import { useSelector } from 'react-redux';
+import { useGetOne } from 'react-admin';
import { Loading, Error } from '../ui';

const UserProfile = ({ record }) => {
-   const data = useSelector(state => state.resources.users.data[record.id]);
+   const { data, isLoading, error } = useGetOne(
+       'users',
+       { id: record.id }
+   );
+   if (isLoading) { return <Loading />; }
+   if (error) { return <Error />; }
    return <div>User {data.username}</div>;
};

-import { useSelector } from 'react-redux';
+import { useGetOne } from 'react-admin';

const BookAuthor = ({ record }) => {
-   const author = useSelector(state =>
-       state.admin.resources.users.data[record.authorId]
-   );
+   const { data: author, isLoading, error } = useGetOne(
+       'users',
+       { id: record.authorId }
+   );
+   if (isLoading) { return <Loading />; }
+   if (error) { return <Error />; }
    return <div>Author {data.username}</div>;
};

// in src/Menu.js
import * as React from 'react';
import { createElement } from 'react';
-import { useSelector } from 'react-redux';
import { useMediaQuery } from '@mui/material';
-import { DashboardMenuItem, Menu, MenuItemLink, getResources } from 'react-admin';
+import { DashboardMenuItem, Menu, MenuItemLink, useResourceDefinitions } from 'react-admin';
import DefaultIcon from '@mui/icons-material/ViewList';
import LabelIcon from '@mui/icons-material/Label';

export const Menu = (props) => {
-   const resources = useSelector(getResources);
+   const resourcesDefinitions = useResourceDefinitions();
+   const resources = Object.keys(resourcesDefinitions).map(name => resourcesDefinitions[name]);
    const open = useSelector(state => state.admin.ui.sidebarOpen);
    return (
        <Menu {...props}>
            <DashboardMenuItem />
            {resources.map(resource => (
                <MenuItemLink
                    key={resource.name}
                    to={`/${resource.name}`}
                    primaryText={
                        (resource.options && resource.options.label) ||
                        resource.name
                    }
                    leftIcon={
                        resource.icon ? <resource.icon /> : <DefaultIcon />
                    }
                    onClick={props.onMenuClick}
                    sidebarIsOpen={open}
                />
            ))}
            {/* add your custom menus here */}
        </Menu>
    );
};

import * as React from 'react';
import { createElement } from 'react';
-import { useSelector } from 'react-redux';
import { useMediaQuery } from '@mui/material';
-import { MenuItemLink, useResourceDefinitions } from 'react-admin';
+import { MenuItemLink, useResourceDefinitions, useSidebarState } from 'react-admin';
import LabelIcon from '@mui/icons-material/Label';

const Menu = ({ onMenuClick, logout }) => {
    const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
-   const open = useSelector(state => state.admin.ui.sidebarOpen);
+   const [open] = useSidebarState();
    const resources = useResourceDefinitions();
    
    return (
        <div>
            {Object.keys(resources).map(name => (
                <MenuItemLink
                    key={name}
                    to={`/${name}`}
                    primaryText={resources[name].options && resources[name].options.label || name}
                    leftIcon={createElement(resources[name].icon)}
                    onClick={onMenuClick}
                    sidebarIsOpen={open}
                />
            ))}
            {isXSmall && logout}
        </div>
    );
}
export default Menu;

-import { useDispatch } from 'react-redux';
-import { showNotification } from 'react-admin';
+import { useNotify } from 'react-admin';

const NotifyButton = () => {
-   const dispatch = useDispatch();
+   const notify = useNotify();
    const handleClick = () => {
-       dispatch(showNotification('Comment approved', 'success'));
+       notify('Comment approved', { type: 'success' });
    }
    return <button onClick={handleClick}>Notify</button>;
};

-import { useDispatch } from 'react-redux';
-import { push } from 'connected-react-router';
+import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
-    const dispatch = useDispatch();
+    const navigate = useNavigate();

    const myHandler = () => {
-        dispatch(push('/my-url'));
+        navigate('/my-url');
    }
}

-import { Admin, Resource, RouteWithoutLayout } from 'react-admin';
+import { Admin, CustomRoutes, Resource } from 'react-admin';

const MyAdmin = () => (
    <Admin
-       customRoutes={[
-           <Route path="/custom" component={MyCustomRoute} />,
-           <RouteWithoutLayout path="/custom2" component={MyCustomRoute2} />,
-       ]}
    >
+       <CustomRoutes>
+           <Route path="/custom" element={<MyCustomRoute />} />
+       </CustomRoutes>
+       <CustomRoutes noLayout>
+           <Route path="/custom2" element={<MyCustomRoute2 />} />
+       </CustomRoutes>
        <Resource name="posts" />
    </Admin>
)

-import { createBrowserHistory } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
import { Admin, Resource } from 'react-admin';

const App = () => (
+   <BrowserRouter>
        <Admin 
            dataProvider={...}
-           history={createBrowserHistory()}
        >    
            <Resource name="posts" />
        </Admin>
+   </BrowserRouter>
);

import { Admin, Resource } from 'react-admin';

const App = () => (
+   <BrowserRouter>
        <Admin
            dataProvider={dataProvider}
            authProvider={authProvider}
-           history={createBrowserHistory()}
+           basename="/admin"
        >
            <Resource name="posts" />
        </Admin>
+   </BrowserRouter>
);

// useGetOne
-const { data, loading } = useGetOne(
-   'posts',
-   123,
-);
+const { data, isLoading } = useGetOne(
+   'posts',
+   { id: 123 }
+);

// useGetList
-const { data, ids, loading } = useGetList(
-   'posts',
-   { page: 1, perPage: 10 },
-   { field: 'published_at', order: 'DESC' },
-);
-return <>{ids.map(id => <span key={id}>{data[id].title}</span>)}</>;
+const { data, isLoading } = useGetList(
+   'posts',
+   {
+      pagination: { page: 1, perPage: 10 },
+      sort: { field: 'published_at', order: 'DESC' },
+   }
+);
+return <>{data.map(record => <span key={record.id}>{record.title}</span>)}</>;

// useGetMany
-const { data, loading } = useGetMany(
-   'posts',
-   [123, 456],
-);
+const { data, isLoading } = useGetMany(
+   'posts',
+   { ids: [123, 456] }
+);

// useGetManyReference
-const { data, ids, loading } = useGetManyReference(
-   'comments',
-   'post_id',
-   123,
-   { page: 1, perPage: 10 },
-   { field: 'published_at', order: 'DESC' }
-   'posts'
-);
-return <>{ids.map(id => <span key={id}>{data[id].title}</span>)}</>;
+const { data, isLoading } = useGetManyReference(
+   'comments',
+   {
+       target: 'post_id',
+       id: 123,
+       pagination: { page: 1, perPage: 10 },
+       sort: { field: 'published_at', order: 'DESC' }
+   }
+);
+return <>{data.map(record => <span key={record.id}>{record.title}</span>)}</>;

// useCreate
-const [create, { loading }] = useCreate(
-   'posts',
-   { title: 'hello, world!' },
-);
-create(resource, data, options);
+const [create, { isLoading }] = useCreate(
+   'posts',
+   { data: { title: 'hello, world!' } }
+);
+create(resource, { data }, options);

// useUpdate
-const [update, { loading }] = useUpdate(
-   'posts',
-   123,
-   { likes: 12 },
-   { id: 123, title: "hello, world", likes: 122 }
-);
-update(resource, id, data, previousData, options);
+const [update, { isLoading }] = useUpdate(
+   'posts',
+   {
+       id: 123,
+       data: { likes: 12 },
+       previousData: { id: 123, title: "hello, world", likes: 122 }
+   }
+);
+update(resource, { id, data, previousData }, options);

// useUpdateMany
-const [updateMany, { loading }] = useUpdateMany(
-   'posts',
-   [123, 456],
-   { likes: 12 },
-);
-updateMany(resource, ids, data, options);
+const [updateMany, { isLoading }] = useUpdateMany(
+   'posts',
+   {
+       ids: [123, 456],
+       data: { likes: 12 },
+   }
+);
+updateMany(resource, { ids, data }, options);

// useDelete
-const [deleteOne, { loading }] = useDelete(
-   'posts',
-   123,
-   { id: 123, title: "hello, world", likes: 122 }
-);
-deleteOne(resource, id, previousData, options);
+const [deleteOne, { isLoading }] = useDelete(
+   'posts',
+   {
+       id: 123,
+       previousData: { id: 123, title: "hello, world", likes: 122 }
+   }
+);
+deleteOne(resource, { id, previousData }, options);

// useDeleteMany
-const [deleteMany, { loading }] = useDeleteMany(
-   'posts',
-   [123, 456],
-);
-deleteMany(resource, ids, options);
+const [deleteMany, { isLoading }] = useDeleteMany(
+   'posts',
+   {
+       ids: [123, 456],
+   }
+);
+deleteMany(resource, { ids }, options);

import * as React from "react";
-import { useQuery } from 'react-admin';
+import { useGetOne } from 'react-admin';
import { Loading, Error } from '../ui';
const UserProfile = ({ record }) => {
-   const { loaded, error, data } = useQuery({
-       type: 'getOne',
-       resource: 'users',
-       payload: { id: record.id }
-   });
+   const { data, isLoading, error } = useGetOne(
+       'users',
+       { id: record.id }
+   );
-   if (!loaded) { return <Loading />; }
+   if (isLoading) { return <Loading />; }
    if (error) { return <Error />; }
    return <div>User {data.username}</div>;
};

-import { useMutation } from 'react-admin';
+import { useUpdate } from 'react-admin';

const BanUserButton = ({ userId }) => {
-   const [update, { loading, error }] = useMutation({
-       type: 'update',
-       resource: 'users',
-       payload: { id: userId, data: { isBanned: true } }
-   });
+   const [update, { isLoading, error }] = useUpdate(
+       'users',
+       { id: userId, data: { isBanned: true } }
+   );
-   return <Button label="Ban" onClick={() => update()} disabled={loading} />;
+   return <Button label="Ban" onClick={() => update()} disabled={isLoading} />;
};

-import { useMutation } from 'react-admin';
+import { useDataProvider } from 'react-admin';
+import { useMutation } from 'react-query';
const BanUserButton = ({ userId }) => {
-   const [mutate, { loading, error, data }] = useMutation({
-       type: 'banUser',
-       payload: userId
-   });
+   const dataProvider = useDataProvider();
+   const { mutate, isLoading } = useMutation(
+       () => dataProvider.banUser(userId)
+   );
-   return <Button label="Ban" onClick={() => mutate()} disabled={loading} />;
+   return <Button label="Ban" onClick={() => mutate()} disabled={isLoading} />;
};

-import { Query } from 'react-admin';
+import { useGetOne } from 'react-admin';

const UserProfile = ({ record }) => {
-   return (
-       <Query type="getOne" resource="users" payload={{ id: record.id }}>
-           {({ loaded, error, data }) => {
-               if (!loaded) { return <Loading />; }
-               if (error) { return <Error />; }
-               return <div>User {data.username}</div>;
-           }}
-       </Query>
-   );
+   const { data, isLoading, error } = useGetOne(
+       'users',
+       { id: record.id }
+   );
+   if (isLoading) { return <Loading />; }
+   if (error) { return <Error />; }
+   return <div>User {data.username}</div>;
}

-import { useState } from 'react';
import { useDataProvider } from 'react-admin';
+import { useMutation } from 'react-query';

const BanUserButton = ({ userId }) => {
    const dataProvider = useDataProvider();
+   const { mutate, isLoading } = useMutation();
-   const [loading, setLoading] = useState(false);
    const handleClick = () => {
-       setLoading(true);
-       dataProvider.banUser(userId, {
-           onSuccess: () => {
-               setLoading(false);
-               console.log('User banned');
-           },
-       });
+       mutate(
+           ['banUser', userId],
+           () => dataProvider.banUser(userId),
+           { onSuccess: () => console.log('User banned') }
+       );
    }
-   return <Button label="Ban" onClick={handleClick} disabled={loading} />;
+   return <Button label="Ban" onClick={handleClick} disabled={isLoading} />;
};

const dataProvider = {
    getOne: (resource, { id }) => {
        return fetch(`/api/${resource}/${id}`)
            .then(r => r.json())
            .then(data => {
-               const validUntil = new Date();
-               validUntil.setTime(validUntil.getTime() + 5 * 60 * 1000);
                return { 
                    data,
-                   validUntil
                };
            }));
    }
};

// in src/dataProvider.js
import simpleRestProvider from 'ra-data-simple-rest';
-import { cacheDataProviderProxy } from 'react-admin'; 

const dataProvider = simpleRestProvider('http://path.to.my.api/');

-export default cacheDataProviderProxy(dataProvider);
+export default dataProvider;

const IncreaseLikeButton = ({ record }) => {
    const diff = { likes: record.likes + 1 };
    const [update, { isLoading, error }] = useUpdate('likes', { id: record.id, data: diff, previousData: record });
    if (error) { return <p>ERROR</p>; }
-   return <button disabled={isLoading} onClick={update}>Like</button>;
+   return <button disabled={isLoading} onClick={() => update()}>Like</button>;
};

const IncreaseLikeButton = ({ record }) => {
    const diff = { likes: record.likes + 1 };
-   const [update, { isLoading, error }] = useUpdate('likes', { id: record.id, data: diff, previousData: record });
+   const [update, { isLoading, error }] = useUpdate();
+   const handleClick = () => {
+       update('likes', { id: record.id, data: diff, previousData: record });
+   };
    if (error) { return <p>ERROR</p>; }
-   return <button disabled={isLoading} onClick={update}>Like</button>;
+   return <button disabled={isLoading} onClick={handleClick}>Like</button>;
};

const {
    open,
    loading,
    handleDialogOpen,
    handleDialogClose,
    handleDelete,
} = useDeleteWithConfirmController({
    resource,
    record,
    redirect,
    onClick,
-    undoable: true
+    mutationMode: 'undoable'
});

export const PostEdit = (props) => (
-    <Edit {...props} undoable>
+    <Edit {...props} mutationMode="undoable">
        <SimpleForm>
            <TextInput source="title" />
        </SimpleForm>
    </Edit>
);

const BookDetail = ({ id }) => {
-   const { data, error, loaded } = useGetOne('books', id);
+   const { data, error, isLoading } = useGetOne('books', { id });
-   if (!loaded) {
+   if (isLoading) {
        return <Loading />;
    }
    if (error) {
        return <Error error={error} />;
    }
    if (!data) {
        return null;
    }
    return (
        <div>
            <h1>{data.book.title}</h1>
            <p>{data.book.author.name}</p>
        </div>
    );
};

import { useAuthState, Loading } from 'react-admin';

const MyPage = () => {
-   const { loading, authenticated } = useAuthState();
+   const { isLoading, authenticated } = useAuthState();
-   if (loading) {
+   if (isLoading) {
        return <Loading />;
    }
    if (authenticated) {
        return <AuthenticatedContent />;
    } 
    return <AnonymousContent />;
};

- useAuthenticated('permissions.posts.can_create');
+ useAuthenticated({ params: 'permissions.posts.can_create' })

<Admin>
-    {permissions => [
-       <Resource name="posts" {...posts} />,
-       <Resource name="comments" {...comments} />,
-       permissions ? <Resource name="users" {...users} /> : null,
-       <Resource name="tags" {...tags} />,
-   ]}
+   <Resource name="posts" {...posts} />
+   <Resource name="comments" {...comments} />
+   <Resource name="tags" {...tags} />
+   {permissions => (
+       <>
+           {permissions ? <Resource name="users" {...users} /> : null}
+       </> 
+   )}
</Admin>

-const PostShow = (props) => (
+const PostShow = () => (
-   <Show {...props}>
+   <Show>
        <SimpleShowLayout>
            <TextField source="title" />
        </SimpleShowLayout>
    </Show>
);

+import { usePermissions } from 'react-admin';

-const PostShow = ({ permissions, ...props }) => {
+const PostShow = () => {
+   const permissions = usePermissions();
    return (
-       <Show {...props}>
+       <Show>
            <SimpleShowLayout>
                <TextField source="title" />
                {permissions === 'admin' &&
                    <NumberField source="nb_views" />
                }
            </SimpleShowLayout>
        </Show>
    );
};

+const { useResourceDefinition } from 'react-admin';

-const PostShow = ({ hasEdit, ...props }) => {
+const PostShow = () => {
+   const { hasEdit } = useResourceDefinition();
    return (
        <Show actions={hasEdit ? <ShowActions /> : null}>
            <SimpleShowLayout>
                <TextField source="title" />
            </SimpleShowLayout>
        </Show>
    );
};

+import { useParams } from 'react-router-dom';

-const PostShow = ({ id, ...props }) => {
+const PostShow = () => {
+   const { id } = useParams();
    return (
        <Show title={`Post #${id}`}>
            <SimpleShowLayout>
                <TextField source="title" />
            </SimpleShowLayout>
        </Show>
    );
};

const MyList = () => (
-    <List>
+    <List disableSyncWithLocation>
        // ...
    </List>
)

-const PostEditActions = ({ basePath }) => (
+const PostEditActions = () => (
    <TopToolbar>
-       <ShowButton basePath={basePath} />
+       <ShowButton />
        {/* Add your custom actions */}
        <Button color="primary" onClick={customAction}>Custom Action</Button>
    </TopToolbar>
);

-   <Datagrid rowClick={(id, basePath, record) => {/* ... */}}>
+   <Datagrid rowClick={(id, resource, record) => {/* ... */}}>

const PostShow = () => {
    const onSuccess = () => {
        // do something
    };
    const onFailure = () => {
        // do something
    };
    return (
        <Show 
-           onSuccess={onSuccess}
-           onFailure={onFailure}
+           queryOptions={{
+               onSuccess: onSuccess,
+               onError: onFailure
+           }}
        >
            <SimpleShowLayout>
                <TextField source="title" />
            </SimpleShowLayout>
        </Show>
    );
};

const PostEdit = () => {
    const onSuccess = () => {
        // do something
    };
    const onFailure = () => {
        // do something
    };
    return (
        <Edit 
-           onSuccess={onSuccess}
-           onFailure={onFailure}
+           mutationOptions={{
+               onSuccess: onSuccess,
+               onError: onFailure
+           }}
        >
            <SimpleForm>
                <TextInput source="title" />
            </SimpleForm>
        </Show>
    );
};

const PostCreate = () => {
    const onSuccess = () => {
        // do something
    };
    const onFailure = () => {
        // do something
    };
    return (
        <Create 
-           onSuccess={onSuccess}
-           onFailure={onFailure}
+           mutationOptions={{
+               onSuccess: onSuccess,
+               onError: onFailure
+           }}
        >
            <SimpleForm>
                <TextInput source="title" />
            </SimpleForm>
        </Create>
    );
};

const MyButton = () => {
    const { save, saving } = useSaveContext();
    const notify = useNotify();

    const handleClick = () => {
        save({ value: 123 }, {
-            onFailure: (error) => {
+            onError: (error) => {
                notify(error.message, { type: 'error' });
            },
        });
    };

    return <button onClick={handleClick}>Save</button>
}

const [update] = useUpdate();
const handleClick = () => {
    update(
        'posts',
        { id: 123, data: { likes: 12 } },
        {
-           onSuccess: ({ data }) => {
+           onSuccess: (data) => {
                // do something with data
            }
        }
    );
};

-import { useGetList, RecordMap } from 'react-admin';
+import { useGetList, RaRecord } from 'react-admin';

const PostListContainer = () => {
-   const { data, ids, loading } = useGetList(
-      'posts',
-      { page: 1, perPage: 10 },
-      { field: 'published_at', order: 'DESC' },
-   );
-   return loading ? null: <PostListDetail data={data} ids={ids} />
+   const { data, isLoading } = useGetList(
+      'posts',
+      {
+         pagination: { page: 1, perPage: 10 },
+         sort: { field: 'published_at', order: 'DESC' },
+      }
+   );
+   return isLoading ? null: <PostListDetail data={data} />
};

-const PostListDetail = ({ ids, data }: { ids: string[], data: RecordMap }) => {
+const PostListDetail = ({ data }: { data: RaRecord[] }) => {
-   return <>{ids.map(id => <span key={id}>{data[id].title}</span>)}</>;
+   return <>{data.map(record => <span key={record.id}>{record.title}</span>)}</>;
};

import * as React from 'react';
import { useListContext, List, TextField, DateField, ReferenceField, EditButton } from 'react-admin';
import { Card, CardActions, CardContent, CardHeader, Avatar } from '@mui/material';
import PersonIcon from '@mui/icons-material/Person';

const CommentGrid = () => {
-   const { data, ids, loading } = useListContext();
+   const { data, isLoading } = useListContext();
-   if (loading) return null;
+   if (isLoading) return null;
    return (
        <div style={{ margin: '1em' }}>
-       {ids.map(id =>
+       {data.map(record =>
-           <Card key={id} style={cardStyle}>
+           <Card key={record.id} style={cardStyle}>
                <CardHeader
-                   title={<TextField record={data[id]} source="author.name" />}
+                   title={<TextField record={record} source="author.name" />}
-                   subheader={<DateField record={data[id]} source="created_at" />}
+                   subheader={<DateField record={record} source="created_at" />}
                    avatar={<Avatar icon={<PersonIcon />} />}
                />
                <CardContent>
-                   <TextField record={data[id]} source="body" />
+                   <TextField record={record} source="body" />
                </CardContent>
                <CardActions style={{ textAlign: 'right' }}>
-                   <EditButton resource="posts" record={data[id]} />
+                   <EditButton resource="posts" record={record} />
                </CardActions>
            </Card>
        )}
        </div>
    );
};

import { List, Datagrid } from 'react-admin'; 

const PostList = () => (
-    <List bulkActionButtons={<PostBulkActionButtons />}>
+    <List>
-        <Datagrid>
+        <Datagrid bulkActionButtons={<PostBulkActionButtons />}>        
            ...
        </Datagrid>
    </List>
);

import { List, Datagrid } from 'react-admin'; 

const PostList = () => (
    <List>
-        <Datagrid hasBulkActions={false}>
+        <Datagrid bulkActionButtons={false}>        
            ...
        </Datagrid>
    </List>
);

import { useListContext } from 'react-admin';

const BookListIterator = () => {
-    const { data, loading, currentSort } = useListContext();
+    const { data, isLoading, sort } = useListContext();

    if (loading) return <Loading />;
    if (data.length === 0) return <p>No data</p>;

    return (<>
-       <div>Books sorted by {currentSort.field}</div>
+       <div>Books sorted by {sort.field}</div>
        <ul>
            {data.map(book =>
                <li key={book.id}>{book.title}</li>
            )}
        </ul>
    </>);
};

-<Datagrid data={data} currentSort={{ field: 'id', order: 'DESC' }}>
+<Datagrid data={data} sort={{ field: 'id', order: 'DESC' }}>
    <TextField source="id" />
    <TextField source="title" />
    <TextField source="author" />
    <TextField source="year" />
</Datagrid>

-setSort(field: string, order: 'ASC' | 'DESC');
+setSort({ field: string, order: 'ASC' | 'DESC' });

const SortButton = () => {
    const { sort, setSort } = useListContext();
    const handleChangeSort = (event) => {
        const field = event.currentTarget.dataset.sort;
-       setSort(
-           field,
-           field === sort.field ? inverseOrder(sort.order) : 'ASC',
-       });
+       setSort({
+           field,
+           order: field === sort.field ? inverseOrder(sort.order) : 'ASC',
+       });
        setAnchorEl(null);
    };

    // ...
};

import { Button, Toolbar } from '@mui/material';
import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight';
+import { useListContext } from 'react-admin';

-const PostPagination = (props) => {
+const PostPagination = () => {
-   const { page, perPage, total, setPage } = props;
+   const { page, perPage, total, setPage } = useListContext();
    const nbPages = Math.ceil(total / perPage) || 1;
    return (
        nbPages > 1 &&
            <Toolbar>
                {page > 1 &&
                    <Button color="primary" key="prev" onClick={() => setPage(page - 1)}>
                        <ChevronLeft />
                        Prev
                    </Button>
                }
                {page !== nbPages &&
                    <Button color="primary" key="next" onClick={() => setPage(page + 1)}>
                        Next
                        <ChevronRight />
                    </Button>
                }
            </Toolbar>
    );
}

export const PostList = () => (
    <List pagination={<PostPagination />}>
        ...
    </List>
);

import { useUnselectAll } from 'react-admin';

const UnselectAllButton = () => {
-   const unselectAll = useUnselectAll();
+   const unselectAll = useUnselectAll('posts');
    const handleClick = () => {
-       unselectAll('posts');
+       unselectAll();
    }
    return <button onClick={handleClick}>Unselect all</button>;
};

const PostCreate = () => (
    <Create>
        <SimpleForm
-            initialValues={{ title: 'A default title' }}
+            defaultValues={{ title: 'A default title' }}
        >
            ...
        </SimpleForm>
    </Create>
)

import { BooleanInput, NumberInput, SimpleForm } from 'react-admin';
+import { yupResolver } from '@hookform/resolvers/yup';
-const validateForm = values => {
-    if (values.isBig && values.count < 6) {
-        return {
-            count: 'Must be greater than 5'
-        }
-    }
-
-    if (values.count < 0) {
-        return {
-            count: 'Must be greater than 0'
-        }
-    }
-}
+const schema = object({
+  isBig: boolean(),
+  count: number().when('isBig', {
+    is: true,
+    then: (schema) => schema.min(5),
+    otherwise: (schema) => schema.min(0),
+  }),
+});

const MyForm = () => (
    <SimpleForm
-        validate={validateForm}
+        resolver={yupResolver(schema)}
    >
        <BooleanInput source="isBig" />
        <NumberInput source="count" />
    </SimpleForm>
)

const PostCreate = () => (
    <Create>
-        <SimpleForm margin="normal" variant="outlined">
+        <SimpleForm>
-            <TextInput source="title" />
+            <TextInput source="title" margin="normal" variant="outlined" />
        </SimpleForm>
    </Create>
)

-const LineWrapper = ({ children, ...props }) => (
-    <div style="display: flex">
-        {Children.map(children, child => cloneElement(child, { ...props, ...child.props }))}
-    </div>
-)

const PostCreate = () => (
    <Create>
        <SimpleForm>
-            <LineWrapper>
+            <div style="display: flex">
                 <TextInput source="title" />
-            </LineWrapper>
+            </div>
        </SimpleForm>
    </Create>
)

const PostEdit = () => (
    <Edit>
        <SimpleForm>
	    <TextInput source="title">
-	    <ReferenceField source="author_id" reference="users">
-	        <TextField source="username" />
-	    </ReferenceField>
+           <Labeled label="Author">
+	        <ReferenceField source="author_id" reference="users">
+	            <TextField source="username" />
+	        </ReferenceField>
+           </Labeled>
        </SimpleForm>
    </Edit>
)

import { ArrayInput, SimpleFormIterator, TextInput } from 'react-admin';

<ArrayInput source="backlinks">
-    <SimpleFormIterator TransitionProps={{ timeout: 400 }}>
+    <SimpleFormIterator>
        <TextInput source="title" />
    </SimpleFormIterator>
</ArrayInput>

- import { FormWithRedirect } from 'react-admin';
+ import { Form } from 'react-admin';

export const MyForm = () => (
+    <Form>
-    <FormWithRedirect
-        render={({handleSubmit}) => (
-            <form onSubmit={handleSubmit}>
                 <input type="text" id="name" name="name" />
                 <button type="submit">Save</button>
-            </form>
-        )}
-    />
+    </Form>
);

import { FormWithRedirect } from 'react-admin';
+ import { Form } from 'react-admin';
+ import { useFormState } from 'react-hook-form';

const MyCustomForm = () => {
    return (
-        <FormWithRedirect
+        <Form>
-            render={({ valid, dirty, handleSubmit }) => (
-               <form onSubmit={handleSubmit}>
                    ...
-                    <SubmitButton disabled={!dirty || !valid}>Save</SubmitButton>
+                    <SubmitButton>Save</SubmitButton>
-               </form>
            )}
-       />
+       </Form>
    );
};

-const SubmitButton = ({ disabled, ...props }) => {
+const SubmitButton = (props) => {
+    const { isDirty, isValid } = useFormState();
    return (
-        <button disabled={disabled} {...props} />
+        <button disabled={!isDirty || !isValid} {...props} />
    );
}

export const PostEdit = () => (
    <Edit>
-       <SimpleForm sanitizeEmptyValues={false}>
+       <SimpleForm>
            <TextInput source="title" />
            <JsonInput source="body" />
        </SimpleForm>
    </Edit>
);

export const PostEdit = () => (
    <Edit>
-       <SimpleForm>
+       <SimpleForm sanitizeEmptyValues>
            <TextInput source="title" />
            <JsonInput source="body" />
        </SimpleForm>
    </Edit>
);

const AccordionSectionTitle = ({ children, name }) => {
    const formGroupState = useFormGroup(name);

    return (
-      <Typography color={formGroupState.invalid && formGroupState.dirty ? 'error' : 'inherit'}>
+      <Typography color={!formGroupState.isValid && formGroupState.isDirty ? 'error' : 'inherit'}>
          {children}
      </Typography>
    );
}

import Toolbar from '@mui/material/Toolbar';
import { SaveButton, ToolbarProps } from 'react-admin';
+import { useFormState } from 'react-hook-form';

const ReviewEditToolbar = (props: ToolbarProps<Review>) => {
-    const { invalid, resource, saving } = props;
+    const { resource, saving } = props;
+    const { isValid } = useFormState();

    return (
        <Toolbar>
            <SaveButton
-               invalid={invalid}
+               invalid={!isValid}
                saving={saving}
            />
        </Toolbar>
    );
};

import { Toolbar, SaveButton } from 'react-admin';

const EditToolbar = props => (
-    <Toolbar {...props} alwaysEnableSaveButton />
+    <Toolbar {...props}>
+        <SaveButton alwaysEnable />
+    </Toolbar>
);

import { Toolbar, SimpleForm, Edit, TextInput, SaveButton, DeleteButton } from 'react-admin';

+const MyToolbar = props => (
+   <Toolbar {...props}> 
+       <SaveButton type="button" />
+       <DeleteButton />
+   </Toolbar>
+);

export const PostEdit = () => (
    <Edit>
-       <SimpleForm submitOnEnter>
+       <SimpleForm toolbar={<MyToolbar/>}>
            <TextInput source="title" />
        </SimpleForm>
    </Edit>
);

import { Toolbar } from 'react-admin';

const MyToolbar = () => {
    return (
-       <Toolbar width="xs"/>
+       <Toolbar />
    );
};

-import { useFormState } from 'react-final-form';
+import { useWatch } from 'react-hook-form';

const CityInput = props => {
-    const { values } = useFormState();
+    const country = useWatch({ name: 'country' });
    return (
        <SelectInput
-            choices={values.country ? toChoices(cities[values.country]) : []}
+            choices={country ? toChoices(cities[country]) : []}
            {...props}
        />
    );
};

-import { FormSpy } from 'react-final-form';
+import { useWatch } from 'react-hook-form';

const CityInput = props => {
+    const country = useWatch({ name: 'country' });
    return (
-        <FormSpy subscription={{ values: true }}>
-            {({ values }) => (
-                <SelectInput
-                    choices={values.country ? toChoices(cities[values.country]) : []}
-                    {...props}
-                />
-            )}
-        </FormSpy>
+        <SelectInput
+             choices={country ? toChoices(cities[country]) : []}
+             {...props}
+        />
    );
};

-import { useForm } from 'react-final-form';
+import { useFormContext } from 'react-hook-form';

const ClearCountry = () => {
-    const { change } = useForm();
+    const { setValue } = useFormContext();

    const handleClick = () => {
-        change('country', '');
+        setValue('country', '');
    };

    return <button onClick={handleClick}>Clear country</button>
}

-import { useForm } from 'react-final-form';
+import { useFormContext } from 'react-hook-form';

const ResetFormButton = () => {
-    const { reset } = useForm();
+    const { reset } = useFormContext();
    return <Button onClick={() => reset()}>Reset</Button>
}

const MyForm = () => {
    return (
        <Create>
-           <FormWithRedirect
+           <Form>
-                render={formProps) => (
                         <TextInput source="name" />
-                        <MySaveButton handleSubmit={handleSubmit}>
+                        <MySaveButton />
-                )}
-           />
+           </Form>
        </Create>
    );
};

-const MySaveButton = ({ handleSubmit }) => (
+const MySaveButton = () => (
-    <button onClick={handleSubmit}>Save</button>
+    <button type="submit">Save</button>
);

const MyForm = () => {
    return (
-        <Create>
+        <Create redirect="show">
-            <FormWithRedirect
+            <Form>
-                render={({ handleSubmitWithRedirect, ...formProps }) => (
                         <TextInput source="name" />
-                        <MySaveButton handleSubmitWithRedirect={handleSubmitWithRedirect}>
+                        <MySaveButton />
-                )}
-            />
+            </Form>
        </Create>
    );
};

-const MySaveButton = ({ handleSubmitWithRedirect }) => (
+const MySaveButton = () => {
    return (
-        <button onClick={() => handleSubmitWithRedirect('show')}>Save</button>
+        <button type="submit">Save</button>
    );
);

const Toolbar = (props) => {
    return (
        <Toolbar>
            <SaveButton
-                onSuccess={handleSuccess}
-                onFailure={handleFailure}
+                mutationOptions={{ onSuccess: handleSuccess, onError: handleFailure }}
            />
        </Toolbar>
    );
}

const MyCustomCreate = () => {
    const createControllerProps = useCreateController();
    const notify = useNotify();
+   const redirect = useRedirect();

    const handleSubmit = (values) => {
-        createControllerProps.save(values, 'show', {
+        createControllerProps.save(values, {
            onSuccess: (data) => {
                notify('Success');
+               redirect('show', '/posts', data.id);
            }
        })
    }

    return (
        <CreateContextProvider value={createControllerProps}>
            <Form onSubmit={handleSubmit}>
               ...
            </Form>
        </CreateContextProvider>
    )
}

const CustomForm = ({ save, ...props }) => {
-    const formContext = {
-        save,
-        saving,
-        ...form group management functions
-    }
    return (
        <Form
            {...props}
            onSubmit={save}
        >
-           <FormContextProvider value={formContext}>
+           <FormGroupsProvider>
                ...
-           </FormContextProvider>
+           </FormGroupsProvider>
            )}
        </Form>
    );
};

-<Create>
+<Create redirect="edit">
-    <SimpleForm redirect="edit">
+    <SimpleForm>
        <TextInput source="name">
    </SimpleForm>
</Create>

const PostCreateToolbar = props => {
+   const notify = useNotify();
+   const redirect = useRedirect();
    return (
        <Toolbar {...props}>
            <SaveButton
                label="post.action.save_and_edit"
-               redirect="edit"
+               onSuccess={data => {
+                   notify('ra.notification.updated', {
+                       type: 'info',
+                       messageArgs: { smart_count: 1 },
+                       undoable: true,
+                   });
+                   redirect('edit', '/posts', data.id)
+               }}
            />
        </Toolbar>
    );
};

const MyComponent = () => {
    const handleSave = () => {

    }

    return (
-        <SimpleForm save={handleSave}>
+        <SimpleForm onSubmit={handleSave}>
            <TextInput source="name" />
        </SimpleForm>
    )
};

+import { useRecordContext } from 'react-admin';

-const MyField = ({ record }) => {
+const MyField = () => {
+   const record = useRecordContext();
    return <div>{record ? record.title : ''}</div>;
}

const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="author" />
            <MyField />
        </Datagrid>
    </List>
);

-const Aside = ({ record }) => (
+const Aside = () => {
+   const record = useRecordContext();
    return (
        <div>
            <Typography variant="h6">Post details</Typography>
            {record && (
                <Typography variant="body2">
                    Creation date: {record.createdAt}
                </Typography>
            )}
        </div>
    );
};

const PostShow = () => (
    <Show>
        <SimpleShowLayout>
            <TextField source="title" />
            <ReferenceField source="author_id" reference="users">
                <NameField />
            </ReferenceField>
        </SimpleShowLayout>
    </Show>
);

-const NameField = ({ record }) => {
+const NameField = () => {
+   const { record } = useRecordContext();
    return <span>{record?.name}</span>;
};

const MyCustomField = () => (
    ... 
);
-MyCustomField.defaultProps = {
-    addLabel: true
-};

-<ArrayField source="backlinks" fieldKey="uuid">
+<ArrayField source="backlinks">
    <Datagrid>
        <DateField source="date" />
        <UrlField source="url" />
    </Datagrid>
</ArrayField>

const PostCreate = () => (
    <Create>
        <SimpleForm>
-            <TextInput source="title" initialValue="A default">
+            <TextInput source="title" defaultValue="A default">
        </SimpleForm>
    </Create>
)

-import { Field } from 'react-final-form';
+import { useController } from 'react-hook-form';

const LatLngInput = () => {
+   const input1 = useController({ name: 'position.lat' });
+   const input2 = useController({ name: 'position.lng' });
    
    return (
        <span>
-           <Field name="lat" component="input" type="number" placeholder="latitude" />
+           <input {...input1.field} type="number" placeholder="latitude" />
            &nbsp;
-           <Field name="lng" component="input" type="number" placeholder="longitude" />
+           <input {...input2.field} type="number" placeholder="longitude" />
        </span>
    );
);
export default LatLngInput;

import TextField from 'mui/material/TextField';
import { useInput, required } from 'react-admin';

const MyInput = ({ helperText, ...props }) => {
    const {
-       input,
+       field,
-       meta: { touched, error },
+       fieldState: { isTouched, invalid, error },
+       formState: { isSubmitted }
        isRequired
    } = useInput(props);

    return (
        <TextField
-           {...input}
+           {...field}
            label={props.label}
-           error={touched && !!error}
+           error={(isTouched || isSubmitted) && invalid}
-           helperText={touched && !!error ? error : helperText}
+           helperText={(isTouched || isSubmitted) && invalid ? error?.message : helperText}
            required={isRequired}
            {...rest}
        />
    );
};

const UserForm = () => (
    <SimpleForm>
-       <MyInput initialValue="John" />
+       <MyInput defaultValue="John" />
    </SimpleForm>
)

const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];

-const FullNameField = ({ record }) => {
+const FullNameField = () => {
+    const record = useRecordContext();    
    return <span>{record.first_name} {record.last_name}</span>;
}

const AuthorsInput = () => {
    <RadioButtonGroupInput source="authors" choices={choices} optionText={<FullNameField />}/>
}

const MyRichTextInput = (props) => (
    <RichTextInput
        {...props}
-        toolbar={[ ['bold', 'italic', 'underline', 'link'] ]}
+        toolbar={
            <RichTextInputToolbar>
				<FormatButtons size={size} />
				<LinkButtons size={size} />
			</RichTextInputToolbar>
        }
    />
)

import {
	RichTextInput,
+	DefaultEditorOptions,
+	RichTextInputToolbar,
+	LevelSelect,
+	FormatButtons,
+	AlignmentButtons,
+	ListButtons,
+	LinkButtons,
+	QuoteButtons,
+	ClearButtons,
} from 'ra-input-rich-text';

-const configureQuill = quill => quill.getModule('toolbar').addHandler('insertSmile', function (value) {
-    const { index, length } = this.quill.getSelection();
-    this.quill..insertText(index + length, ':-)', 'api');
-});

const MyRichTextInput = (props) => (
    <RichTextInput
        {...props}
-       configureQuill={configureQuill}
+       toolbar={
+           <RichTextInputToolbar>
+               <LevelSelect size={size} />
+	        <FormatButtons size={size} />
+	        <AlignmentButtons {size} />
+	        <ListButtons size={size} />
+	        <LinkButtons size={size} />
+	        <QuoteButtons size={size} />
+	        <ClearButtons size={size} />
+               <ToggleButton
+                   aria-label="Add a smile"
+	            title="Add a smile"
+                   onClick={() => editor.insertContent(':-)')}
+	        >
+                   <Remove fontSize="inherit" />
+	        </ToggleButton>
+           </RichTextInputToolbar>
	}
    />
}

import { BooleanInput } from 'react-admin';

<BooleanInput
    label="Commentable"
    source="commentable"
-   onChange={checked => { console.log(checked); }}
+   onChange={e => { console.log(e.target.checked); }}
/>

const choices = [{ id: 1, name: 'value' }, { id: 2, name: 'value 2' }]

const MyOptionalSelect = () => (
-    <SelectInput choices={choices} allowEmpty />
+    <SelectInput choices={choices} />
);

const MyRequiredSelect = () => (
-    <SelectInput choices={choices} />
+    <SelectInput choices={choices} validate={[required()]} />
);

const UserListFilter = [
    <ReferenceInput
        source="email"
-       filterToQuery={search => ({ email: search })}
    >
-       <AutocompleteInput />
+       <AutocompleteInput filterToQuery={search => ({ email: search })} />
    </ReferenceInput>
]

const UserInput = [
    <ReferenceInput
        source="email"
        reference="users"
-       label="User"
-       validate={[required()]}
-       fullWidth
-       className="myCustomCLass"
-       formClassName=="myCustomFormClass"
-       helperText="Custom helper text"
    >
-        <AutocompleteInput />
+        <AutocompleteInput 
+            label="User" 
+            validate={[required()]}
+            fullWidth
+            className="myCustomClass"
+            formClassName=="myCustomFormClass"
+            helperText="Custom helper text"
+        />
    </ReferenceInput>
]

-import { useReferenceArrayInputContext } from 'react-admin';
-import { useChoicesContext } from 'react-admin';

const MyCustomInput = () => {
-    const {
-        choices, 
-        error, 
-        warning, 
-        loaded, 
-        loading, 
-        setFilter, 
-        setPagination, 
-        setSort, 
-        setSortForList,
-    } = useReferenceArrayInputContext();
+    const {
+        allChoices,
+        availableChoices,
+        selectedChoices,
+        filter,
+        filterValues,
+        page,
+        perPage,
+        setFilters,
+        setPage,
+        setPerPage,
+        setSort,
+        sort,
+   } = useChoicesContext();
    return // ...
}

const MyCustomAutocomplete = (props) => {
-    const { choices, input, meta, resource, setFilter, source } = props;
+    const { allChoices, setFilters } = useChoicesContext(props); 

-    const { input, meta } = useInput({ input, meta });
+    const { field, fieldState } = useInput(props);

    const handleTextInputChange = (event) => {
-        setFilter(event.target.value);
         // Note that we don't force you to use `q` anymore
+        setFilters({ q: event.target.value });
    };

    return (
        //...
    )
}

// in src/Menu.js
import * as React from 'react';
import { createElement } from 'react';
-import { useSelector } from 'react-redux';
import { useMediaQuery } from '@mui/material';
-import { DashboardMenuItem, Menu, MenuItemLink, getResources } from 'react-admin';
+import { DashboardMenuItem, Menu, MenuItemLink, useResourceDefinitions } from 'react-admin';
import DefaultIcon from '@mui/icons-material/ViewList';
import LabelIcon from '@mui/icons-material/Label';

export const Menu = (props) => {
-   const resources = useSelector(getResources);
+   const resourcesDefinitions = useResourceDefinitions();
+   const resources = Object.keys(resourcesDefinitions).map(name => resourcesDefinitions[name]);
    const open = useSelector(state => state.admin.ui.sidebarOpen);
    return (
        <Menu {...props}>
            <DashboardMenuItem />
            {resources.map(resource => (
                <MenuItemLink
                    key={resource.name}
                    to={`/${resource.name}`}
                    primaryText={
                        (resource.options && resource.options.label) ||
                        resource.name
                    }
                    leftIcon={
                        resource.icon ? <resource.icon /> : <DefaultIcon />
                    }
                    onClick={props.onMenuClick}
                    sidebarIsOpen={open}
                />
            ))}
            {/* add your custom menus here */}
        </Menu>
    );
};

-import { MenuItemLink, UserMenu } from 'react-admin';
+import { Logout, UserMenu, useUserMenu } from 'react-admin';
import { Link } from 'react-router-dom';
+import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import SettingsIcon from '@mui/icons-material/Settings';

-const ConfigurationMenu = (props) => {
// It's important to pass the ref to allow Material UI to manage the keyboard navigation
+const ConfigurationMenu = forwardRef((props, ref) => {
+   const { onClose } = useUserMenu();
    return (
-       <MenuItemLink
+       <MenuItem
+           ref={ref}
            // It's important to pass the props to allow Material UI to manage the keyboard navigation
            {...props}
+           component={Link}
            to="/configuration"
-            onClick={props.onClick}
+            onClick={onClose}
        >
            <ListItemIcon>
                <SettingsIcon />
            </ListItemIcon>
            <ListItemText>
                Configuration
            </ListItemText>
-       </MenuItemLink>
+       </MenuItem>
    );
});

-const CustomUserMenu = (props) => (
+const CustomUserMenu = () => (
-    <UserMenu {...props}>
+    <UserMenu>
        <ConfigurationMenu />
+       <Logout />
    </UserMenu>
);

const MyMenuItem = forwardRef((props, ref) => {
-    const translate = useTranslate();
    return (
        <MenuItemLink
            ref={ref}
            {...props}
            to="/configuration"
-            primaryText={translate('pos.configuration')}
+            primaryText="pos.configuration"
            leftIcon={<SettingsIcon />}
        />
    )
});

-import { Admin, Logout } from 'react-admin';
+import { Admin, AppBar, Layout, Logout, UserMenu } from 'react-admin';

const MyCustomLogout = () => <Logout className="my-class-name" />;

+ const MyUserMenu = () => <UserMenu><MyCustomLogout /></UserMenu>;

+ const MyAppBar = () => <AppBar userMenu={<MyUserMenu />} />;

+ const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} />;

const MyAdmin = () => (
    <Admin
-        logoutButton={<MyCustomLogout />}
+        layout={MyLayout}
    >
        // ....
    </Admin>
)

-import { Container, ThemeProvider } from '@mui/material';
+import { Container } from '@mui/material';
import { Notification, Error } from 'react-admin';
import Header from './Header';

const Layout = (props) => {
-    const { children, theme } = props;
+    const { children } = props;
    return (
-        <ThemeProvider theme={theme}>
+        <>
            <Header />
            <Container>
                <main id="main-content">
                    {children}
                </main>
            </Container>
            <Notification />
-        </ThemeProvider>
+        </>
    );
};

// in src/MyNotification.js
import { Notification } from 'react-admin';

export const MyNotification = props => (
    <Notification {...props} autoHideDuration={5000} />
);

// in src/MyLayout.js
-import { Layout } from 'react-admin';
-import { MyNotification } from './MyNotification';

-export const MyLayout = props => (
-   <Layout {...props} notification={MyNotification} />
-);

// in src/App.js
-import { MyLayout } from './MyLayout';
+import { MyNotification } from './MyNotification';
import dataProvider from './dataProvider';

const App = () => (
-   <Admin layout={MyLayout} dataProvider={dataProvider}>
+   <Admin notification={MyNotification} dataProvider={dataProvider}>
        // ...
    </Admin>
);

-import { Notification } from 'react-admin';

export const MyLayout = ({
    children,
    dashboard,
    logout,
    title,
}) => {
    // ...
    return (<>
        // ...
-       <Notification />
    </>);
};

const MyButton = () => {
-   const [open, toggleSidebar] = useToggleSidebar();
+   const [open, setOpen] = useSidebarState();
    return (
        <Button
            color="inherit"
-           onClick={() => toggleSidebar()}
+           onClick={() => setOpen(!open)}
        >
            {open ? 'Open' : 'Close'}
        </Button>
    );
};

const messages = {
    ra: {
        navigation: {
            no_results: 'No results found',
            no_more_results:
                'The page number %{page} is out of boundaries. Try the previous page.',
            page_out_of_boundaries: 'Page number %{page} out of boundaries',
            page_out_from_end: 'Cannot go after last page',
            page_out_from_begin: 'Cannot go before page 1',
            page_range_info: '%{offsetBegin}-%{offsetEnd} of %{total}',
            partial_page_range_info:
                '%{offsetBegin}-%{offsetEnd} of more than %{offsetEnd}',
            current_page: 'Page %{page}',
            page: 'Go to page %{page}',
            next: 'Go to next page',
-           prev: 'Go to previous page',
+           previous: 'Go to previous page',
            page_rows_per_page: 'Rows per page:',
            skip_nav: 'Skip to content',
        },
        // ...

-<TranslationProvider locale="en" i18nProvider={i18nProvider}>
+<I18nContextProvider value={i18nProvider}>
   ...
-</TranslationProvider>
+</I18nContextProvider>

+import { defaultTheme } from 'react-admin';

const theme = {
+   ...defaultTheme,
    components: {
+       ...defaultTheme.components,
        RaDatagrid: {
            root: {
                backgroundColor: "Lavender",
                "& .RaDatagrid-headerCell": {
                    backgroundColor: "MistyRose",
                },
            }
        }
    }
};

const theme = {
    components: {
        RaDatagrid: {
            root: {
                backgroundColor: "Lavender",
                "& .RaDatagrid-headerCell": {
                    backgroundColor: "MistyRose",
                },
            }
        }
+       MuiTextField: {
+           defaultProps: {
+               variant: 'filled',
+           }
+       }
    }
};

```jsx
import { useNotify } from 'react-admin';

const NotifyButton = () => {
    const notify = useNotify();
    const handleClick = () => {
-       notify(`Comment approved`, 'success', undefined, true);
+       notify(`Comment approved`, { type: 'success', undoable: true });
    }
    return <button onClick={handleClick}>Notify</button>;
};

-import { useVersion } from 'react-admin';

const MyComponent = () => {
-   const version = useVersion();
    return (
-       <Card key={version}>
+       <Card>
            ...
        </Card>
    );
};

import { useShowContext } from 'react-admin';

const PostDetail = () => {
-   const { data, version } = useShowContext();
+   const { data } = useShowContext();
    return (
-       <Card key={version}>
+       <Card>
            ...
        </Card>
    );
}

-import { useNotify, useRedirect } from 'react-admin';
+import { useNotify } from 'react-admin';
+import { useFormContext } from 'react-hook-form';

const PostCreateToolbar = props => {
    const notify = useNotify();
-   const redirect = useRedirect();
+   const { reset } = useFormContext();

    return (
        <Toolbar {...props}>
-           <SaveButton label="Save" />
            <SaveButton
                label="Save and add"
                type="button"
                mutationOptions={{
                    onSuccess: () => {
-                       redirect(false);
+                       reset();
+                       window.scrollTo(0, 0);
                        notify('ra.notification.created', {
                            type: 'info',
                            messageArgs: { smart_count: 1 },
                        });
                    },
                }}
            />
        </Toolbar>
    );
};

-const PostTitle = ({ record }) => {
-const PostTitle = () => {
+    const record = useRecordContext();
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        ...
    </Edit>
);

-import { Edit, SimpleForm } from 'react-admin';
+import { Edit, SimpleForm, useNotify } from 'react-admin';

const PostEdit = () => {
+   const notify = useNotify();
+   const onSuccess = () => notify('Post updated successfully');
    return (
-       <Edit successMessage="Post updated successfully">
+       <Edit mutationOptions={{ onSuccess }}>
            <SimpleForm>
                ...
            </SimpleForm>
        </Edit>
    );
};

-import { Record } from 'react-admin';
+import { RaRecord } from 'react-admin';

-export interface Customer extends Record {
+export interface Customer extends RaRecord {
    id: string;
    name: string;
    email: string;
}

import React from 'react';
-import { TestContext } from 'ra-test';
+import { AdminContext } from 'react-admin';
import { render, screen } from '@testing-library/react';

import MyComponent from './MyComponent';

test('<MyComponent>', async () => {
    render(
-       <TestContext>
+       <AdminContext>
            <MyComponent />
-       </TestContext>
+       </AdminContext>
    );
    const items = await screen.findAllByText(/Item #[0-9]: /)
    expect(items).toHaveLength(10)
})

import React from 'react';
-import { renderWithRedux } from 'ra-test';
+import { AdminContext } from 'react-admin';
import { render, screen } from '@testing-library/react';

import MyComponent from './MyComponent';

test('<MyComponent>', async () => {
-   renderWithRedux(
+   render(
+       <AdminContext>
            <MyComponent />
+       </AdminContext>
    );
    const items = await screen.findAllByText(/Item #[0-9]: /)
    expect(items).toHaveLength(10)
})

-import { renderHook } from 'ra-test'
+import { renderHook } from '@testing-library/react-hooks'
import useCounter from './useCounter'

test('should use counter', () => {
-   const { hookValue } = renderHook(() => useCounter())
+   const { result } = renderHook(() => useCounter())

-   expect(hookValue.count).toBe(0)
+   expect(result.current.count).toBe(0)
})

+import { QueryClientProvider, QueryClient } from 'react-query';

// this component relies on dataProvider hooks
const BookDetail = ({ id }) => {
    const { data, error, isLoading } = useGetOne('books', { id });
    if (isLoading) {
        return <Loading />;
    }
    if (error) {
        return <Error error={error} />;
    }
    if (!data) {
        return null;
    }
    return (
        <div>
            <h1>{data.book.title}</h1>
            <p>{data.book.author.name}</p>
        </div>
    );
};

test('MyComponent', () => {
    render(
+       <QueryClientProvider client={new QueryClient()}>
            <BookDetail id={1} />
+       </QueryClientProvider>
    );
    // ...
});