diff --git a/UPGRADE.md b/UPGRADE.md
index e79e3049f7b..8368ebb2a6e 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -75,3 +75,36 @@ If you're using a Custom App, you had to render Resource components with the reg
 -               <Resource name="users" context="registration" />
 +               <Resource name="users" intent="registration" />
 ```
+
+## `withDataProvider` no longer injects `dispatch`
+
+The `withDataProvider` HOC used to inject two props: `dataProvider`, and redux' `dispatch`. This last prop is now easy to get via the `useDispatch` hook from Redux, so `withDataProvider` no longer injects it.
+
+```diff
+import {
+   showNotification,
+   UPDATE,
+   withDataProvider,
+} from 'react-admin';
++ import { useDispatch } from 'react-redux';
+
+-const ApproveButton = ({ dataProvider, dispatch, record }) => {
++const ApproveButton = ({ dataProvider, record }) => {
++   const dispatch = withDispatch();
+    const handleClick = () => {
+        const updatedRecord = { ...record, is_approved: true };
+        dataProvider(UPDATE, 'comments', { id: record.id, data: updatedRecord })
+            .then(() => {
+                dispatch(showNotification('Comment approved'));
+                dispatch(push('/comments'));
+            })
+            .catch((e) => {
+                dispatch(showNotification('Error: comment not approved', 'warning'))
+            });
+    }
+
+    return <Button label="Approve" onClick={handleClick} />;
+}
+
+export default withDataProvider(ApproveButton);
+```
diff --git a/docs/Actions.md b/docs/Actions.md
index d0aacbb6412..6f89d578e66 100644
--- a/docs/Actions.md
+++ b/docs/Actions.md
@@ -5,259 +5,158 @@ title: "Querying the API"
 
 # Querying the API
 
-Admin interfaces often have to query the API beyond CRUD requests. For instance, in an administration for comments, an "Approve" button (allowing to update the `is_approved` property and to save the updated record in one click) - is a must have.
+Admin interfaces often have to query the API beyond CRUD requests. For instance, a user profile page may need to get the User object based on a user id. Or, users may want to an "Approve" a comment by pressing a button, and this action should update the `is_approved` property and save the updated record in one click.
 
-How can you add such custom actions with react-admin? There are several answers to that question, and you should understand the strengths and drawbacks of each solution before choosing one.
+React-admin provides special hooks to emit read and write queries to the `dataProvider`, which in turn sends requests to your API.
 
-* [Using `fetch`](#the-basic-way-using-fetch)
-* [Using the `dataProvider`](#using-the-data-provider-instead-of-fetch)
-* [Using the `withDataProvider` Decorator](#using-the-withdataprovider-decorator)
-* [Using the `<Query>` and `<Mutation>` Components](#query-and-mutation-components)
-* [Using a Custom Action Creator](#using-a-custom-action-creator)
+## `useQuery` Hook
 
-**Tip**: If you don't have the time to read this entire chapter, head to [the `<Query>` and `<Mutation>` components section](#query-and-mutation-components). It's the best choice in 90% of the cases.
+Use the `useQuery` hook to emit a read query to the API when a component mounts. The parameters are the same as the ones expected by the [`dataProvider`](./DataProviders.md):
 
-## The Basic Way: Using `fetch`
+- `type`: The Query type, e.g `GET_LIST`
+- `resource`: The Resource name, e.g. "posts"
+- `params`: Query parameters. Depends on the query type.
 
-Here is an implementation of the "Approve" button using the browser `fetch()` function that works fine:
+The return value of `useQuery` is an object, which updates according to the request state:
 
-```jsx
-// in src/comments/ApproveButton.js
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import Button from '@material-ui/core/Button';
-import { showNotification } from 'react-admin';
-import { push } from 'connected-react-router';
+- start: `{ loading: true, loaded: false }`
+- success: `{ data: [data from response], total: [total from response], loading: false, loaded: true }`
+- error: `{ error: [error from response], loading: false, loaded: true }`
 
-class ApproveButton extends Component {
-    handleClick = () => {
-        const { push, record, showNotification } = this.props;
-        const updatedRecord = { ...record, is_approved: true };
-        fetch(`/comments/${record.id}`, { method: 'PUT', body: updatedRecord })
-            .then(() => {
-                showNotification('Comment approved');
-                push('/comments');
-            })
-            .catch((e) => {
-                showNotification('Error: comment not approved', 'warning')
-            });
-    }
+Here is an implementation of a user profile component using the `useQuery` hook:
 
-    render() {
-        return <Button label="Approve" onClick={this.handleClick} />;
-    }
-}
+```jsx
+import { useQuery, GET_ONE } from 'react-admin';
 
-ApproveButton.propTypes = {
-    push: PropTypes.func,
-    record: PropTypes.object,
-    showNotification: PropTypes.func,
+const UserProfile = ({ record }) => {
+    const { loading, error, data } = useQuery(
+        GET_ONE,
+        'users',
+        { id: record.id }
+    );
+    if (loading) { return <Loading />; }
+    if (error) { return <p>ERROR</p>; }
+    return <div>User {data.username}</div>;
 };
-
-export default connect(null, {
-    showNotification,
-    push,
-})(ApproveButton);
 ```
 
-The `handleClick` function makes a `PUT` request the REST API with `fetch`, then displays a notification (with `showNotification`) and redirects to the comments list page (with `push`);
+Under the hood, `useQuery` dispatches a Redux action (named `CUSTOM_FETCH`), which triggers the global loading indicator in the top bar. This action then queries your `dataProvider`, passing it the exact same parameters.
 
-`showNotification` and `push` are *action creators*. This is a Redux term for functions that return a simple action object. When given an object of action creators in the second argument, `connect()` will [decorate each action creator](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) with Redux' `dispatch` method, so in the `handleClick` function, a call to `showNotification()` is actually a call to `dispatch(showNotification())`.
+In this example, the `dataProvider` receives a query for `('GET_ONE', 'users', { id: 123 })`. It should return a Promise for a response with a `data` key looking like `{ data: { id: 123, username: 'john_doe', firstName: 'John', lastName: 'Doe' } }`. That `data` ends up in the hook return value, and the loading indicator stops spinning.
 
-This `ApproveButton` can be used right away, for instance in the list of comments, where `<Datagrid>` automatically injects the `record` to its children:
+Here is another example usage of `useQuery`, this time to display a list of users:
 
 ```jsx
-// in src/comments/index.js
-import ApproveButton from './ApproveButton';
-
-export const CommentList = (props) =>
-    <List {...props}>
-        <Datagrid>
-            <DateField source="created_at" />
-            <TextField source="author.name" />
-            <TextField source="body" />
-            <BooleanField source="is_approved" />
-            <ApproveButton />
-        </Datagrid>
-    </List>;
+import { useQuery, GET_LIST } from 'react-admin';
+
+const UserList = () => {
+    const { loading, error, data, total } = useQuery(
+        GET_LIST,
+        'users',
+        {
+            pagination: { page: 1, perPage: 10 },
+            sort: { field: 'username', order: 'ASC' },
+        }
+    );
+    if (loading) { return <Loading />; }
+    if (error) { return <p>ERROR</p>; }
+    return (
+        <div>
+            <p>Total users: {total}</p>
+            <ul>
+                {data.map(user => <li key={user.username}>{user.username}</li>)}
+            </ul>
+        </div>
+    );
+};
 ```
 
-Or, in the `<Edit>` page, as a [custom action](./CreateEdit.md#actions):
+As a reminder, here are the read query types handled by data providers:
 
-```jsx
-// in src/comments/CommentEditActions.js
-import React from 'react';
-import CardActions from '@material-ui/core/CardActions';
-import ApproveButton from './ApproveButton';
+Type                 | Usage                                           | Params format              | Response format
+-------------------- | ------------------------------------------------|--------------------------- | ---------------
+`GET_LIST`           | Search for resources                            | `{ pagination: { page: {int} , perPage: {int} }, sort: { field: {string}, order: {string} }, filter: {Object} }` | `{ data: {Record[]}, total: {int} }`
+`GET_ONE`            | Read a single resource, by id                   | `{ id: {mixed} }`          | `{ data: {Record} }`
+`GET_MANY`           | Read a list of resource, by ids                 | `{ ids: {mixed[]} }`       | `{ data: {Record[]} }`
+`GET_MANY_REFERENCE` | Read a list of resources related to another one | `{ target: {string}, id: {mixed}, pagination: { page: {int} , perPage: {int} }, sort: { field: {string}, order: {string} }, filter: {Object} }`     | `{ data: {Record[]} }`
 
-const cardActionStyle = {
-    zIndex: 2,
-    display: 'inline-block',
-    float: 'right',
-};
+You can destructure the return value of the `useQuery` hook as `{ data, total, error, loading, loaded }`.
 
-const CommentEditActions = ({ basePath, data, resource }) => (
-    <CardActions style={cardActionStyle}>
-        <ApproveButton record={data} />
-    </CardActions>
-);
+**Tip**: Your `dataProvider` should return the `total` value for list queries only, to express the total number of results (which may be higher than the number of returned results if the response is paginated). 
 
-export default CommentEditActions;
+## `useMutation` Hook
 
-// in src/comments/index.js
-import CommentEditActions from './CommentEditActions';
+`useQuery` emits the request to the `dataProvider` as soon as the component mounts. To emit the request based on a user action, use the `useMutation` hook instead. This hook returns a callback that emits the request when executed, and an object containing the request state:
 
-export const CommentEdit = (props) =>
-    <Edit {...props} actions={<CommentEditActions />}>
-        ...
-    </Edit>;
-```
+- mount: { loading: false, loaded: false }
+- mutate called: { loading: true, loaded: false }
+- success: { data: [data from response], total: [total from response], loading: false, loaded: true }
+- error: { error: [error from response], loading: false, loaded: true }
 
-## Using The Data Provider Instead of Fetch
-
-The previous code uses `fetch()`, which means it makes HTTP requests directly. But APIs often require a bit of HTTP plumbing to deal with authentication, query parameters, encoding, headers, etc. It turns out you probably already have a function that maps from a REST request to an HTTP request: the [Data Provider](./DataProviders.md). So it's a good idea to use this function instead of `fetch` - provided you have exported it:
+Here is an implementation of an "Approve" button:
 
 ```jsx
-// in src/dataProvider.js
-import jsonServerProvider from 'ra-data-json-server';
-export default jsonServerProvider('http://Mydomain.com/api/');
-```
-
-The `dataProvider` function returns a Promise, so the difference with `fetch` is minimal:
-
-```diff
 // in src/comments/ApproveButton.js
--import { showNotification } from 'react-admin';
-+import { showNotification, UPDATE } from 'react-admin';
-+import dataProvider from '../dataProvider';
+import { useMutation, UPDATE } from 'react-admin';
 
-class ApproveButton extends Component {
-    handleClick = () => {
-        const { push, record, showNotification } = this.props;
-        const updatedRecord = { ...record, is_approved: true };
--       fetch(`/comments/${record.id}`, { method: 'PUT', body: updatedRecord })
-+       dataProvider(UPDATE, 'comments', { id: record.id, data: updatedRecord })
-            .then(() => {
-                showNotification('Comment approved');
-                push('/comments');
-            })
-            .catch((e) => {
-                showNotification('Error: comment not approved', 'warning')
-            });
-    }
-
-    render() {
-        return <Button label="Approve" onClick={this.handleClick} />;
-    }
-}
-```
-
-As a reminder, the signature of the  `dataProvider` function is:
-
-```jsx
-/**
- * Query a data provider and return a promise for a response
- *
- * @example
- * dataProvider(GET_ONE, 'posts', { id: 123 })
- *  => new Promise(resolve => resolve({ id: 123, title: "hello, world" }))
- *
- * @param {string} type Request type, e.g GET_LIST
- * @param {string} resource Resource name, e.g. "posts"
- * @param {Object} payload Request parameters. Depends on the action type
- * @returns {Promise} the Promise for a response
- */
-const dataProvider = (type, resource, params) => new Promise();
+const ApproveButton = ({ record }) => {
+    const [approve, { loading }] = useMutation(
+        UPDATE,
+        'comments',
+        { id: record.id, data: { isApproved: true } }
+    );
+    return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
+};
 ```
 
-As for the syntax of the various request types (`GET_LIST`, `GET_ONE`, `UPDATE`, etc.), head to the [Data Provider documentation](./DataProviders.md#request-format) for more details.
-
-## Using the `withDataProvider` Decorator
-
-Using either `fetch` or the `dataProvider` has one drawback: while the request is being processed by the server, the UI doesn't show the loading indicator.
+Under the hood, `useMutation` also dispatches a Redux `CUSTOM_FETCH` action, and takes care of showing the global loading indicator when the request is emitted.
 
-React-admin components don't call the `dataProvider` function directly. Instead, they dispatch special Redux actions that react-admin turns into `dataProvider` calls. This allows react-admin to handle the loading state automatically. 
+User actions usually trigger write queries - that's why this hook is called `useMutation`. As a reminder, here are the write query types handled by data providers:
 
-You can use the same feature for your own components. You'll need to wrap your component with a function called `withDataProvider`, which injects a `dataProvider` prop to the component. This `dataProvider` prop is a function which behaves exactly like your own `dataProvider`: it has the same signature, and it returns a Promise. The only difference is that it uses Redux under the hood. That means you get a loading indicator! In addition, `withDataProvider` injects the `dispatch` function into the component, so you don't even need to `connect()` your own component to dispatch actions anymore.
+Type                 | Usage                     | Params format                             | Response format
+-------------------- | --------------------------|------------------------------------------ | ---------------
+`CREATE`             | Create a single resource  | `{ data: {Object} }`                      | `{ data: {Record} }`
+`UPDATE`             | Update a single resource  | `{ id: {mixed}, data: {Object}, previousData: {Object} }` | `{ data: {Record} }`
+`UPDATE_MANY`        | Update multiple resources | `{ ids: {mixed[]}, data: {Object} }`      | `{ data: {mixed[]} }` The ids which have been updated
+`DELETE`             | Delete a single resource  | `{ id: {mixed}, previousData: {Object} }` | `{ data: {Record} }`
+`DELETE_MANY`        | Delete multiple resources | `{ ids: {mixed[]} }`                      | `{ data: {mixed[]} }` The ids which have been deleted
 
-Here is the `ApproveButton` component modified to use `withDataProvider`:
-
-```diff
-// in src/comments/ApproveButton.js
-import {
-   showNotification,
-   UPDATE,
-+  withDataProvider,
-} from 'react-admin';
--import { connect } from 'react-redux';
--import dataProvider from '../dataProvider';
-
-class ApproveButton extends Component {
-    handleClick = () => {
--       const { push, record, showNotification } = this.props;
-+       const { dataProvider, dispatch, record } = this.props;
-        const updatedRecord = { ...record, is_approved: true };
-        dataProvider(UPDATE, 'comments', { id: record.id, data: updatedRecord })
-            .then(() => {
--               showNotification('Comment approved');
-+               dispatch(showNotification('Comment approved'));
--               push('/comments');
-+               dispatch(push('/comments'));
-            })
-            .catch((e) => {
--               showNotification('Error: comment not approved', 'warning')
-+               dispatch(showNotification('Error: comment not approved', 'warning'))
-            });
-    }
+You can destructure the return value of the `useMutation` hook as `[mutate,  { data, total, error, loading, loaded }]`.
 
-    render() {
-        return <Button label="Approve" onClick={this.handleClick} />;
-    }
-}
+This `ApproveButton` can be used right away, for instance in the list of comments, where `<Datagrid>` automatically injects the `record` to its children:
 
-ApproveButton.propTypes = {
-+   dataProvider: PropTypes.func.isRequired,
-+   dispatch: PropTypes.func.isRequired,
--   push: PropTypes.func,
-    record: PropTypes.object,
--   showNotification: PropTypes.func,
-};
+```jsx
+// in src/comments/index.js
+import ApproveButton from './ApproveButton';
 
--export default connect(null, {
--    showNotification,
--    push,
--})(ApproveButton);
-+export default withDataProvider(ApproveButton)
+export const CommentList = (props) =>
+    <List {...props}>
+        <Datagrid>
+            <DateField source="created_at" />
+            <TextField source="author.name" />
+            <TextField source="body" />
+            <BooleanField source="is_approved" />
+            <ApproveButton />
+        </Datagrid>
+    </List>;
 ```
 
 ## Handling Side Effects
 
-Fetching data is called a *side effect*, since it calls the outside world, and is asynchronous. Usual actions may have other side effects, like showing a notification, or redirecting the user to another page. The `dataProvider` function injected by `withDataProvider` accepts a fourth parameter, which lets you describe the options of the query, including success and failure side effects. So the previous component can be even further simplified as follows:
+Fetching data is called a *side effect*, since it calls the outside world, and is asynchronous. Usual actions may have other side effects, like showing a notification, or redirecting the user to another page. Both `useQuery` and `useMutation` hooks accept a fourth parameter, which lets you describe the options of the query, including success and failure side effects. 
+
+Here is how to add notifications and a redirection to the `ApproveButton` component using that fourth parameter:
 
 ```diff
 // in src/comments/ApproveButton.js
-import {
--  showNotification,
-   UPDATE,
-   withDataProvider,
-} from 'react-admin';
--import { push } from 'connected-react-router';
-
-class ApproveButton extends Component {
-    handleClick = () => {
-        const { dataProvider, dispatch, record } = this.props;
-        const updatedRecord = { ...record, is_approved: true };
--       dataProvider(UPDATE, 'comments', { id: record.id, data: updatedRecord })
--           .then(() => {
--               dispatch(showNotification('Comment approved'));
--               dispatch(push('/comments'));
--           })
--           .catch((e) => {
--               dispatch(showNotification('Error: comment not approved', 'warning'))
--           });
--   }
-+       dataProvider(UPDATE, 'comments', { id: record.id, data: updatedRecord }, {
+import { useMutation, UPDATE } from 'react-admin';
+
+const ApproveButton = ({ record }) => {
+    const [approve, { loading }] = useMutation(
+        UPDATE,
+        'comments',
+        { id: record.id, data: { isApproved: true } },
++       {
 +           onSuccess: {
 +               notification: { body: 'Comment approved', level: 'info' },
 +               redirectTo: '/comments',
@@ -265,30 +164,20 @@ class ApproveButton extends Component {
 +           onError: {
 +               notification: { body: 'Error: comment not approved', level: 'warning' }
 +           }
-+       })
-
-    render() {
-        return <FlatButton label="Approve" onClick={this.handleClick} />;
-    }
-}
-
-ApproveButton.propTypes = {
-    dataProvider: PropTypes.func.isRequired,
--   dispatch: PropTypes.func.isRequired,
-    record: PropTypes.object,
++       }
+    );
+    return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
 };
-
-export default withDataProvider(ApproveButton);
 ```
 
 React-admin can handle the following side effects:
 
 - `notification`: Display a notification. The property value should be an object describing the notification to display. The `body` can be a translation key. `level` can be either `info` or `warning`.
 - `redirectTo`: Redirect the user to another page. The property value should be the path to redirect the user to.
-- `basePath`: This is not a side effect, but it's used internally to compute redirection paths. Set it when you have a redirection side effect.
 - `refresh`: Force a rerender of the current view (equivalent to pressing the Refresh button). Set to true to enable.
 - `unselectAll`: Unselect all lines in the current datagrid. Set to true to enable.
 - `callback`: Execute an arbitrary function. The value should be the function to execute. React-admin will call the function with an object as parameter (`{ requestPayload, payload, error }`). The `payload` contains the decoded response body when it's successfull. When it's failed, the response body is passed in the `error`.
+- `basePath`: This is not a side effect, but it's used internally to compute redirection paths. Set it when you have a redirection side effect.
 
 ## Optimistic Rendering and Undo
 
@@ -298,15 +187,18 @@ For its own fetch actions, react-admin uses an approach called *optimistic rende
 
 As a bonus, while the success notification is displayed, users have the ability to cancel the action *before* the data provider is even called.
 
-You can benefit from optimistic rendering when you call the `dataProvider` prop function, too. You just need to pass the `undoable: true` option in the options parameter:
+You can benefit from optimistic rendering when you call the `useQuery` and `useMutation` hooks, too. You just need to pass the `undoable: true` option in the options parameter:
 
 ```diff
 // in src/comments/ApproveButton.js
-class ApproveButton extends Component {
-    handleClick = () => {
-        const { dataProvider, dispatch, record } = this.props;
-        const updatedRecord = { ...record, is_approved: true };
-        dataProvider(UPDATE, 'comments', { id: record.id, data: updatedRecord }, {
+import { useMutation, UPDATE } from 'react-admin';
+
+const ApproveButton = ({ record }) => {
+    const [approve, { loading }] = useMutation(
+        UPDATE,
+        'comments',
+        { id: record.id, data: { isApproved: true } },
+        {
 +           undoable: true,
             onSuccess: {
                 notification: { body: 'Comment approved', level: 'info' },
@@ -315,30 +207,82 @@ class ApproveButton extends Component {
             onError: {
                 notification: { body: 'Error: comment not approved', level: 'warning' }
             }
-        })
+        }
+    );
+    return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
+};
+```
 
-    render() {
-        return <FlatButton label="Approve" onClick={this.handleClick} />;
-    }
+## `useDataProvider` Hook
+
+Sometimes `useQuery` and `useMutation` are too limited, for instance when you need to execute several queries in a row, and update the component state when all the queries have returned. For this use case, use the `useDataProvider` hook, which returns a `dataProvider` callback. This callback behaves exactly like the raw `dataProvider`, except it uses Redux under the hood. That means that it returns a Promise for the result.
+
+For instance, here is how to query for a list of pending reviews together with the author of each review:
+
+```jsx
+import { useState, useEffect } from 'react';
+import { useDataProvider, GET_LIST, GET_MANY } from 'react-admin';
+
+const Dashboard = () => {
+    const dataProvider = useDataProvider();
+    const [loading, setLoading] = useState(true);
+    const [reviews, setReviews] = useState([]);
+    useEffect(() => {
+        (async function() { // useEffect doesn't accept async functions
+            const { data: pendingReviews } = await dataProvider(
+                GET_LIST,
+                'reviews',
+                { filter: { status: 'pending' }, sort: { field: 'date', order: 'DESC' } }
+            );
+            const customerIds = pendingReviews.map(review => review.customer_id);
+            const uniqueCustomerIds = [...new Set(customerIds)];
+            const { data: customers } = await dataProvider(
+                GET_MANY,
+                'customers',
+                { ids: uniqueCustomerIds }
+            );
+            const customersById = customers.reduce((prev, customer) => {
+                prev[customer.id] = customer;
+                return prev;
+            }, {});
+            const pendingReviewsWithCustomers = pendingReviews.map(review => ({
+                ...review,
+                customer: customersById[review.customer_id]
+            }))
+            setReviews(pendingReviewsWithCustomers);
+            setLoading(false);
+        })();
+    }, []);
+
+    if (loading) { return <Loading />; }
+    return (
+        <div>
+            {reviews.map(review => (
+                <div key={review.id}>
+                    Review on Product {review.product_id}
+                    By {review.customer.username}:<br />
+                    {review.body}
+                </div>
+            ))}
+        </div>
+    )
 }
 ```
 
-The fact that react-admin can handle side effects and undo a call to the API if you use `withDataProvider` should be a good motivation to prefer it to raw `fetch`.
-
-## `<Query>` and `<Mutation>` Components
+`useDataProvider` is more low-level than `useQuery` and `useMutation`, as it doesn't handle loading and error states (even though queries from `useDataProvider` trigger the global loading indicator). The `dataProvider` callback that it returns also accepts a fourth options parameter, just like the two other hoows.
 
-When using the `withDataProvider` decorator to fetch data from the API, you must create a stateful class component to handle the initial state, the loading state, the loaded state, and the error state. That's a lot of boilerplate for a simple query.
+## Legacy Components: `<Query>`, `<Mutation>`, and `withDataProvider`
 
-For such cases, react-admin provides a `<Query>` component, which uses `withDataProvider` under the hood. It leverages the render props pattern to reduce the boilerplate.
+Before react had hooks, react-admin used render props and higher order components to provide the same functionality. Legacy code will likely contain instances of `<Query>`, `<Mutation>`, and `withDataProvider`. Their syntax, which is identical to their hook counterpart, is illustrated below.
 
-For instance, to fetch and display a user profile in a standalone component:
+You can fetch and display a user profile using the `<Query>` component, which uses render props:
 
 {% raw %}
 ```jsx
-import { Query } from 'react-admin';
+import { Query, GET_ONE } from 'react-admin';
 
 const UserProfile = ({ record }) => (
-    <Query type="GET_ONE" resource="users" payload={{ id: record.id }}>
+    <Query type={GET_ONE} resource="users" payload={{ id: record.id }}>
         {({ data, loading, error }) => {
             if (loading) { return <Loading />; }
             if (error) { return <p>ERROR</p>; }
@@ -349,17 +293,18 @@ const UserProfile = ({ record }) => (
 ```
 {% endraw %}
 
-Or a user list on the dashboard:
+Or, query a user list on the dashboard with the same `<Query>` component:
 
-{% raw %}
 ```jsx
+import { Query, GET_LIST } from 'react-admin';
+
 const payload = {
    pagination: { page: 1, perPage: 10 },
    sort: { field: 'username', order: 'ASC' },
 };
 
 const UserList = () => (
-    <Query type="GET_LIST" resource="users" payload={payload}>
+    <Query type={GET_LIST} resource="users" payload={payload}>
         {({ data, total, loading, error }) => {
             if (loading) { return <Loading />; }
             if (error) { return <p>ERROR</p>; }
@@ -375,14 +320,17 @@ const UserList = () => (
     </Query>
 );
 ```
-{% endraw %}
 
-Just like the `dataProvider` injected prop, the `<Query>` component expects three parameters: `type`, `resource`, and `payload`. It fetches the data provider on mount, and passes the data to its child component once the response from the API arrives.
+Just like `useQuery`, the `<Query>` component expects three parameters: `type`, `resource`, and `payload`. It fetches the data provider on mount, and passes the data to its child component once the response from the API arrives.
+
+And if you need to chain API calls, don't hesitate to nest `<Query>` components.
 
-The `<Query>` component is designed to read data from the API. When calling the API to update ("mutate") data, use the `<Mutation>` component instead. It passes a callback to trigger the API call to its child function. And the `<ApproveButton>` component from previous sections is a great use case for demonstrating `<Mutation>`:
+When calling the API to update ("mutate") data, use the `<Mutation>` component instead. It passes a callback to trigger the API call to its child function. 
+
+Here is a version of the `<ApproveButton>` component demonstrating `<Mutation>`:
 
 ```jsx
-import { Mutation } from 'react-admin';
+import { Mutation, UPDATE } from 'react-admin';
 
 const options = {
     undoable: true,
@@ -399,13 +347,13 @@ const ApproveButton = ({ record }) => {
     const payload = { id: record.id, data: { ...record, is_approved: true } };
     return (
         <Mutation
-            type="UPDATE"
+            type={UPDATE}
             resource="comments"
             payload={payload}
             options={options}
         >
-            {(approve) => (
-                <FlatButton label="Approve" onClick={approve} />
+            {(approve, { loading }) => (
+                <FlatButton label="Approve" onClick={approve} disabled={loading} />
             )}
         </Mutation>
     );
@@ -414,15 +362,99 @@ const ApproveButton = ({ record }) => {
 export default ApproveButton;
 ```
 
-Thanks to `Query` and `Mutation`, you can use a stateless function component instead of a class component, avoid the decoration with the `withDataProvider` HOC, and write less code.
+And here is the `<Dashboard>` component using the `withDataProvider` HOC instead of the `useProvider` hook:
+
+```diff
+import { useState, useEffect } from 'react';
+-import { useDataProvider, GET_LIST, GET_MANY } from 'react-admin';
++import { wihtDataProvider, GET_LIST, GET_MANY } from 'react-admin';
+
+-const Dashboard = () => {
++const Dashboard = ({ dataProvider }) => {
+-   const dataProvider = useDataProvider();
+    const [loading, setLoading] = useState(true);
+    const [reviews, setReviews] = useState([]);
+    useEffect(() => {
+        (async function() { // useEffect doesn't accept async functions
+            const { data: pendingReviews } = await dataProvider(
+                GET_LIST,
+                'reviews',
+                { filter: { status: 'pending' }, sort: { field: 'date', order: 'DESC' } }
+            );
+            // ...
+        })();
+    }, []);
 
-And if you need to chain API calls, don't hesitate to nest `<Query>` components!
+    return (
+        <div>
+            {reviews.map(review => (
+                <div key={review.id}>
+                    Review on Product {review.product_id}
+                    By {review.customer.username}:<br />
+                    {review.body}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+-export default Dashboard;
++export default withDataProvider(Dashboard);
+```
+
+Note that these components are implemented in react-admin using the hooks described earlier. If you're writing new components, prefer the hooks, which are faster, and do not pollute the component tree.
+
+## Querying The API With `fetch`
+
+`useQuery`, `useMutation` and `useDataProvider` are "the react-admin way" to query the API, but nothing prevents you from using `fetch` if you want. For instance, when you don't want to add some routing logic to the data provider for a RPC method on your API, that makes perfect sense.
+
+There is no special react-admin sauce in that case. Here is an example implementation of calling `fetch` in a component:
+
+```jsx
+// in src/comments/ApproveButton.js
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { showNotification, fetchStart, fetchEnd } from 'react-admin';
+import { push } from 'connected-react-router';
+
+const ApproveButton = ({ record }) => {
+    const dispatch = useDispatch();
+    const [loading, setLoading] = useState(false;)
+    const handleClick = () => {
+        setLoading(true);
+        dispatch(fetchStart()); // start the global loading indicator 
+        const updatedRecord = { ...record, is_approved: true };
+        fetch(`/comments/${record.id}`, { method: 'PUT', body: updatedRecord })
+            .then(() => {
+                dispatch(showNotification('Comment approved'));
+                dispatch(push('/comments'));
+            })
+            .catch((e) => {
+                dispatch(showNotification('Error: comment not approved', 'warning'))
+            })
+            .finally(() => {
+                setLoading(false);
+                dispatch(fetchEnd()); // stop the global loading indicator
+            });
+    }
+
+    return <Button label="Approve" onClick={handleClick} disabled={loading} />;
+}
+
+export default ApproveButton;
+```
+
+If you use `fetch`, you'll have to handle side effects on your own using Redux actions, as shown in this example.
+
+`showNotification` and `push` are *action creators*. This is a Redux term for functions that return a simple action object. 
+
+**TIP**: APIs often require a bit of HTTP plumbing to deal with authentication, query parameters, encoding, headers, etc. It turns out you probably already have a function that maps from a REST request to an HTTP request: your [Data Provider](./DataProviders.md). So it's often better to use `useDataProvider` instead of `fetch`.
 
 ## Using a Custom Action Creator 
 
 In some rare cases, several components may share the same data fetching logic. In these cases, you will probably want to extract that logic into a custom Redux action. 
 
-Warning: This is for advanced use cases only, and it requires a good level of understanding of Redux and react-admin internals. In most cases, `withDataProvider` is enough.
+Warning: This is for advanced use cases only, and it requires a good level of understanding of Redux and react-admin internals. In most cases, `useDataProvider` is enough.
 
 First, extract the request into a custom action creator. Use the dataProvider verb (`UPDATE`) as the `fetch` meta, pass the resource name as the `resource` meta, and pass the request parameters as the action `payload`:
 
@@ -440,31 +472,23 @@ export const commentApprove = (id, data, basePath) => ({
 
 Upon dispatch, this action will trigger the call to `dataProvider(UPDATE, 'comments', { id, data: { ...data, is_approved: true })`, dispatch a `COMMENT_APPROVE_LOADING` action, then after receiving the response, dispatch either a `COMMENT_APPROVE_SUCCESS`, or a `COMMENT_APPROVE_FAILURE`.
 
-To use the new action creator in the component, `connect` it:
+To use the new action creator in the component, `dispatch` it:
 
 ```jsx
 // in src/comments/ApproveButton.js
-import { connect } from 'react-redux';
+import { dispatch } from 'react-redux';
 import { commentApprove } from './commentActions';
 
-class ApproveButton extends Component {
-    handleClick = () => {
-        const { commentApprove, record } = this.props;
-        commentApprove(record.id, record);
+const ApproveButton = ({ record }) => {
+    const dispatch = useDispatch();
+    const handleClick = () => {
+        dispatch(commentApprove(record.id, record));
         // how about push and showNotification?
     }
-
-    render() {
-        return <Button onClick={this.handleClick}>Approve</Button>;
-    }
+    return <Button onClick={handleClick}>Approve</Button>;
 }
 
-ApproveButton.propTypes = {
-    commentApprove: PropTypes.func.isRequired,,
-    record: PropTypes.object,
-};
-
-export default connect(null, { commentApprove })(ApproveButton);
+export default ApproveButton;
 ```
 
 It works fine: when a user presses the "Approve" button, the API receives the `UPDATE` call, and that approves the comment. Another added benefit of using custom actions with the `fetch` meta is that react-admin automatically handles the loading state, so you don't need to mess up with `fetchStart()` and `fetchEnd()` manually.
@@ -473,7 +497,7 @@ But it's not possible to call `push` or `showNotification` in `handleClick` anym
 
 ## Adding Side Effects to Actions
 
-Just like for the `withDataProvider`, you can associate side effects to a fetch action declaratively by setting the appropriate keys in the action `meta`.
+Just like for the `useDataProvider` hook, you can associate side effects to a fetch action declaratively by setting the appropriate keys in the action `meta`.
 
 So the side effects will be declared in the action creator rather than in the component. For instance, to display a notification when the `COMMENT_APPROVE` action is successfully dispatched, add the `notification` meta:
 
@@ -505,7 +529,7 @@ export const commentApprove = (id, data, basePath) => ({
 });
 ```
 
-The side effects accepted in the `meta` field of the action are the same as in the fourth parameter of the `dataProvider` function injected by `withDataProvider`:
+The side effects accepted in the `meta` field of the action are the same as in the fourth parameter of the function returned by `useQuery`, `useMutation`, or `withDataProvider`:
 
 - `notification`: Display a notification. The property value should be an object describing the notification to display. The `body` can be a translation key. `level` can be either `info` or `warning`.
 - `redirectTo`: Redirect the user to another page. The property value should be the path to redirect the user to.
@@ -516,40 +540,27 @@ The side effects accepted in the `meta` field of the action are the same as in t
 
 ## Making An Action Undoable
 
-when using the `withDataProvider` function, you could trigger optimistic rendering and get an undo button for free. the same feature is possible using custom actions. You need to decorate the action with the `startUndoable` action creator:
+when using the `useMutation` hook, you could trigger optimistic rendering and get an undo button for free. The same feature is possible using custom actions. You need to decorate the action with the `startUndoable` action creator:
 
 ```diff
 // in src/comments/ApproveButton.js
-+import { startUndoable as startUndoableAction } from 'ra-core';
--import { commentApprove as commentApproveAction } from './commentActions';
-+import { commentApprove } from './commentActions';
-
-class ApproveButton extends Component {
-    handleClick = () => {
--       const { commentApprove, record } = this.props;
--       commentApprove(record.id, record);
-+       const { startUndoable, record } = this.props;
-+       startUndoable(commentApprove(record.id, record));
-    }
+import { dispatch } from 'react-redux';
+import { commentApprove } from './commentActions';
++import { startUndoable } from 'react-admin';
 
-    render() {
-        return <Button onClick={this.handleClick}>Approve</Button>;
+const ApproveButton = ({ record }) => {
+    const dispatch = useDispatch();
+    const handleClick = () => {
+-       dispatch(commentApprove(record.id, record));
++       dispatch(startUndoable(commentApprove(record.id, record)));
     }
+    return <Button onClick={handleClick}>Approve</Button>;
 }
 
-ApproveButton.propTypes = {
--   commentApprove: PropTypes.func,
-+   startUndoable: PropTypes.func,
-    record: PropTypes.object,
-};
-
-export default connect(null, {
--   commentApprove: commentApproveAction,
-+   startUndoable: startUndoableAction,
-})(ApproveButton);
+export default ApproveButton;
 ```
 
-And that's all it takes to make a fetch action optimistic. Note that the `startUndoable` action creator is passed to Redux `connect` as `mapDispatchToProp`, to be decorated with `dispatch` - but `commentApprove` is not. Only the first action must be decorated with dispatch.
+And that's all it takes to make a fetch action optimistic.
 
 ## Altering the Form Values before Submitting
 
@@ -562,38 +573,28 @@ Knowing this, you can dispatch a custom action with a button and still benefit f
 
 ```jsx
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import { dispatch } from 'react-redux';
 import { crudCreate, SaveButton, Toolbar } from 'react-admin';
 
 // A custom action creator which modifies the values before calling the default crudCreate action creator
-const saveWithNote = (values, basePath, redirectTo) =>
+const addComment = (values, basePath, redirectTo) =>
     crudCreate('posts', { ...values, average_note: 10 }, basePath, redirectTo);
 
-class SaveWithNoteButtonView extends Component {
-    handleClick = () => {
-        const { basePath, handleSubmit, redirect, saveWithNote } = this.props;
-
+const SaveWithNoteButtonView = ({ handleSubmitWithRedirect, ...props }) => {
+    const handleClick = () => {
+        const { basePath, handleSubmit, redirect } = props;
         return handleSubmit(values => {
-            saveWithNote(values, basePath, redirect);
+            dispatch(addComment(values, basePath, redirect));
         });
     };
 
-    render() {
-        const { handleSubmitWithRedirect, saveWithNote, ...props } = this.props;
-
-        return (
-            <SaveButton
-                handleSubmitWithRedirect={this.handleClick}
-                {...props}
-            />
-        );
-    }
+    return (
+        <SaveButton
+            handleSubmitWithRedirect={handleClick}
+            {...props}
+        />
+    );
 }
-
-const SaveWithNoteButton = connect(
-    undefined,
-    { saveWithNote }
-)(SaveWithNoteButtonView);
 ```
 
 This button can be used in the `PostCreateToolbar` component:
@@ -650,7 +651,7 @@ export const commentApprove = (id, data, basePath) => ({
 });
 ```
 
-Under the hood, `withDataProvider` uses the `callback` side effect to provide a Promise interface for dispatching fetch actions. As chaining custom side effects will quickly lead you to callback hell, we recommend that you use the `callback` side effect sparingly.
+Under the hood, `useDataProvider` uses the `callback` side effect to provide a Promise interface for dispatching fetch actions. As chaining custom side effects will quickly lead you to callback hell, we recommend that you use the `callback` side effect sparingly.
 
 ## Custom Sagas
 
@@ -717,35 +718,23 @@ This action can be triggered on mount by the following component:
 
 ```jsx
 // in src/BitCoinRate.js
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { bitcoinRateReceived as bitcoinRateReceivedAction } from './bitcoinRateReceived';
+import React from 'react';
+import { dispatch } from 'react-redux';
+import { bitcoinRateReceived } from './bitcoinRateReceived';
 
-class BitCoinRate extends Component {
-    componentWillMount() {
+const BitCoinRate = ({ rate }) => {
+    const dispatch = useDispatch();
+    useEffect(() => {
         fetch('https://blockchain.info/fr/ticker')
             .then(response => response.json())
             .then(rates => rates.USD['15m'])
-            .then(bitcoinRateReceived) // dispatch action when the response is received
-    }
+            .then(() => dispatch(bitcoinRateReceived(rate))) // dispatch action when the response is received
+    }, []);
 
-    render() {
-        const { rate } = this.props;
-        return <div>Current bitcoin value: {rate}$</div>
-    }
+    return <div>Current bitcoin value: {rate}$</div>
 }
 
-BitCoinRate.propTypes = {
-    bitcoinRateReceived: PropTypes.func,
-    rate: PropTypes.number,
-};
-
-const mapStateToProps = state => ({ rate: state.bitcoinRate });
-
-export default connect(mapStateToProps, {
-    bitcoinRateReceived: bitcoinRateReceivedAction,
-})(BitCoinRate);
+export default BitCoinRate;
 ```
 
 In order to put the rate passed to `bitcoinRateReceived()` into the Redux store, you'll need a reducer:
@@ -782,7 +771,7 @@ export default App;
 ```
 {% endraw %}
 
-**Tip**: You can avoid storing data in the Redux state by storing data in a component state instead. It's much less complicated to deal with, and more performant, too. Use the global state only when you really need to.
+**Tip**: You can avoid storing data in the Redux state by storing data in a component state instead. It's much less complicated to deal with, and more performant, too. Use the global state only when you need to access data from several components which are far away in the application tree.
 
 ## List Bulk Actions
 
@@ -792,44 +781,3 @@ Almost everything we saw before about custom actions is true for custom `List` b
 * They do not receive the current record in the `record` prop as there are many of them.
 
 You can find a complete example of a custom Bulk Action button in the `List` documentation, in the [Bulk Action Buttons](/List.html#bulk-action-buttons) section.
-
-## Conclusion
-
-Which style should you choose for your own action buttons? Here is a quick benchmark:
-
-<table>
-  <thead>
-    <tr>
-      <th>Solution</th>
-      <th>Advantages</th>
-      <th>Drawbacks</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code class="highlighter-rouge">fetch</code></td>
-      <td><ul><li>Nothing to learn</li></ul></td>
-      <td><ul><li>Requires duplication of authentication</li><li>Does not handle the loading state</li><li>Adds boilerplate</li></ul></td>
-    </tr>
-    <tr>
-      <td><code class="highlighter-rouge">dataProvider</code></td>
-      <td><ul><li>Familiar API</li></ul></td>
-      <td><ul><li>Does not handle the loading state</li><li>Adds boilerplate</li></ul></td>
-    </tr>
-    <tr>
-      <td><code class="highlighter-rouge">withDataProvider</code></td>
-      <td><ul><li>Familiar API</li><li>Handles side effects</li></ul></td>
-      <td><ul><li>Adds boilerplate</li><li>Uses HOC</li></ul></td>
-    </tr>
-    <tr>
-      <td><code class="highlighter-rouge">&lt;Query&gt;</code> and <code class="highlighter-rouge">&lt;Mutation&gt;</code></td>
-      <td><ul><li>Declarative</li><li>Dense</li><li>Handles loading and error states</li><li>Handles side effects</li></ul></td>
-      <td><ul><li>Mix logic and presentation in markup</li></ul></td>
-    </tr>
-    <tr>
-      <td>Custom action</td>
-      <td><ul><li>Allows logic reuse</li><li>Handles side effects</li><li>Idiomatic to Redux</li></ul></td>
-      <td><ul><li>Hard to chain calls</li></ul></td>
-    </tr>
-  </tbody>
-</table>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 56a5b78a58b..df26c6fb300 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -713,13 +713,10 @@
                         </a>
                         <ul class="articles" {% if page.path !='Actions.md' %}style="display:none" {% endif %}>
                             <li class="chapter">
-                                <a href="#the-basic-way-using-fetch">The Basic Way: Using <code>fetch</code></a>
+                                <a href="#usequery-hook"><code>useQuery</code></a>
                             </li>
                             <li class="chapter">
-                                <a href="#using-the-data-provider-instead-of-fetch">Using the <code>dataProvider</code></a>
-                            </li>
-                            <li class="chapter">
-                                <a href="#using-the-withdataprovider-decorator">Using <code>withDataProvider</code></a>
+                                <a href="#usemutation-hook"><code>useMutation</code></a>
                             </li>
                             <li class="chapter">
                                 <a href="#handling-side-effects">Handling Side Effects</a>
@@ -728,8 +725,14 @@
                                 <a href="#optimistic-rendering-and-undo">Optimistic Rendering and Undo</a>
                             </li>
                             <li class="chapter">
-                                <a href="#query-and-mutation-components"><code>&lt;Query&gt;</code> and <code>&lt;Mutation&gt;</code></a>
+                                    <a href="#usedataprovider-hook"><code>useDataProvider</code></a>
+                                </li>
+                            <li class="chapter">
+                                <a href="#legacy-components-query-mutation-and-withdataprovider"><code>&lt;Query&gt;</code> and <code>&lt;Mutation&gt;</code></a>
                             </li>    
+                            <li class="chapter">
+                                <a href="#querying-the-api-with-fetch">Querying The API With <code>fetch</code></a>
+                            </li>
                             <li class="chapter">
                                 <a href="#using-a-custom-action-creator">Using a Custom Action Creator</a>
                             </li>
diff --git a/examples/demo/src/dashboard/Dashboard.js b/examples/demo/src/dashboard/Dashboard.js
index 042bee3042a..6fade6ca15c 100644
--- a/examples/demo/src/dashboard/Dashboard.js
+++ b/examples/demo/src/dashboard/Dashboard.js
@@ -35,7 +35,6 @@ class Dashboard extends Component {
     fetchData() {
         this.fetchOrders();
         this.fetchReviews();
-        this.fetchCustomers();
     }
 
     async fetchOrders() {
@@ -112,34 +111,10 @@ class Dashboard extends Component {
         });
     }
 
-    async fetchCustomers() {
-        const { dataProvider } = this.props;
-        const aMonthAgo = new Date();
-        aMonthAgo.setDate(aMonthAgo.getDate() - 30);
-        const { data: newCustomers } = await dataProvider(
-            GET_LIST,
-            'customers',
-            {
-                filter: {
-                    has_ordered: true,
-                    first_seen_gte: aMonthAgo.toISOString(),
-                },
-                sort: { field: 'first_seen', order: 'DESC' },
-                pagination: { page: 1, perPage: 100 },
-            }
-        );
-        this.setState({
-            newCustomers,
-            nbNewCustomers: newCustomers.reduce(nb => ++nb, 0),
-        });
-    }
-
     render() {
         const {
-            nbNewCustomers,
             nbNewOrders,
             nbPendingReviews,
-            newCustomers,
             pendingOrders,
             pendingOrdersCustomers,
             pendingReviews,
@@ -208,10 +183,7 @@ class Dashboard extends Component {
                                     reviews={pendingReviews}
                                     customers={pendingReviewsCustomers}
                                 />
-                                <NewCustomers
-                                    nb={nbNewCustomers}
-                                    visitors={newCustomers}
-                                />
+                                <NewCustomers />
                             </div>
                         </div>
                     </div>
diff --git a/examples/demo/src/dashboard/NewCustomers.js b/examples/demo/src/dashboard/NewCustomers.js
index 1460f552b9a..8474fe7b90e 100644
--- a/examples/demo/src/dashboard/NewCustomers.js
+++ b/examples/demo/src/dashboard/NewCustomers.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import compose from 'recompose/compose';
 import Card from '@material-ui/core/Card';
 import List from '@material-ui/core/List';
@@ -10,7 +10,7 @@ import Typography from '@material-ui/core/Typography';
 import CustomerIcon from '@material-ui/icons/PersonAdd';
 import Divider from '@material-ui/core/Divider';
 import { Link } from 'react-router-dom';
-import { translate } from 'react-admin';
+import { translate, useQuery, GET_LIST } from 'react-admin';
 
 import CardIcon from './CardIcon';
 
@@ -40,43 +40,64 @@ const styles = theme => ({
     },
 });
 
-const NewCustomers = ({ visitors = [], nb, translate, classes }) => (
-    <div className={classes.main}>
-        <CardIcon Icon={CustomerIcon} bgColor="#4caf50" />
-        <Card className={classes.card}>
-            <Typography className={classes.title} color="textSecondary">
-                {translate('pos.dashboard.new_customers')}
-            </Typography>
-            <Typography
-                variant="headline"
-                component="h2"
-                className={classes.value}
-            >
-                {nb}
-            </Typography>
-            <Divider />
-            <List>
-                {visitors.map(record => (
-                    <ListItem
-                        button
-                        to={`/customers/${record.id}`}
-                        component={Link}
-                        key={record.id}
-                    >
-                        <Avatar
-                            src={`${record.avatar}?size=32x32`}
-                            className={classes.avatar}
-                        />
-                        <ListItemText
-                            primary={`${record.first_name} ${record.last_name}`}
-                            className={classes.listItemText}
-                        />
-                    </ListItem>
-                ))}
-            </List>
-        </Card>
-    </div>
-);
+const NewCustomers = ({ translate, classes }) => {
+    const aMonthAgo = useMemo(() => {
+        const date = new Date();
+        date.setDate(date.getDate() - 30);
+        return date;
+    }, []);
+
+    const { loaded, data: visitors } = useQuery(GET_LIST, 'customers', {
+        filter: {
+            has_ordered: true,
+            first_seen_gte: aMonthAgo.toISOString(),
+        },
+        sort: { field: 'first_seen', order: 'DESC' },
+        pagination: { page: 1, perPage: 100 },
+    });
+
+    if (!loaded) return null;
+    const nb = visitors.reduce(nb => ++nb, 0);
+    return (
+        <div className={classes.main}>
+            <CardIcon Icon={CustomerIcon} bgColor="#4caf50" />
+            <Card className={classes.card}>
+                <Typography className={classes.title} color="textSecondary">
+                    {translate('pos.dashboard.new_customers')}
+                </Typography>
+                <Typography
+                    variant="headline"
+                    component="h2"
+                    className={classes.value}
+                >
+                    {nb}
+                </Typography>
+                <Divider />
+                <List>
+                    {visitors.map(record => (
+                        <ListItem
+                            button
+                            to={`/customers/${record.id}`}
+                            component={Link}
+                            key={record.id}
+                        >
+                            <Avatar
+                                src={`${record.avatar}?size=32x32`}
+                                className={classes.avatar}
+                            />
+                            <ListItemText
+                                primary={`${record.first_name} ${
+                                    record.last_name
+                                }`}
+                                className={classes.listItemText}
+                            />
+                        </ListItem>
+                    ))}
+                </List>
+            </Card>
+        </div>
+    );
+};
 
 const enhance = compose(
     withStyles(styles),
diff --git a/examples/demo/src/reviews/AcceptButton.js b/examples/demo/src/reviews/AcceptButton.js
index bdabf49b6e6..cc0f8f44e53 100644
--- a/examples/demo/src/reviews/AcceptButton.js
+++ b/examples/demo/src/reviews/AcceptButton.js
@@ -4,10 +4,11 @@ import { connect } from 'react-redux';
 import { formValueSelector } from 'redux-form';
 import Button from '@material-ui/core/Button';
 import ThumbUp from '@material-ui/icons/ThumbUp';
-import { translate, Mutation } from 'react-admin';
+import { translate, useMutation } from 'react-admin';
 import compose from 'recompose/compose';
 
 const sideEffects = {
+    undoable: true,
     onSuccess: {
         notification: {
             body: 'resources.reviews.notification.approved_success',
@@ -24,34 +25,33 @@ const sideEffects = {
 };
 
 /**
- * This custom button demonstrate using <Mutation> to update data
+ * This custom button demonstrate using useMutation to update data
  */
-const AcceptButton = ({ record, translate }) =>
-    record && record.status === 'pending' ? (
-        <Mutation
-            type="UPDATE"
-            resource="reviews"
-            payload={{ id: record.id, data: { status: 'accepted' } }}
-            options={sideEffects}
+const AcceptButton = ({ record, translate }) => {
+    const [approve, { loading }] = useMutation(
+        'UPDATE',
+        'reviews',
+        { id: record.id, data: { status: 'accepted' } },
+        sideEffects
+    );
+    return record && record.status === 'pending' ? (
+        <Button
+            variant="outlined"
+            color="primary"
+            size="small"
+            onClick={approve}
+            disabled={loading}
         >
-            {approve => (
-                <Button
-                    variant="outlined"
-                    color="primary"
-                    size="small"
-                    onClick={approve}
-                >
-                    <ThumbUp
-                        color="primary"
-                        style={{ paddingRight: '0.5em', color: 'green' }}
-                    />
-                    {translate('resources.reviews.action.accept')}
-                </Button>
-            )}
-        </Mutation>
+            <ThumbUp
+                color="primary"
+                style={{ paddingRight: '0.5em', color: 'green' }}
+            />
+            {translate('resources.reviews.action.accept')}
+        </Button>
     ) : (
         <span />
     );
+};
 
 AcceptButton.propTypes = {
     record: PropTypes.object,
diff --git a/packages/ra-core/package.json b/packages/ra-core/package.json
index 305c5a873d4..a209a0fe66f 100644
--- a/packages/ra-core/package.json
+++ b/packages/ra-core/package.json
@@ -41,7 +41,7 @@
         "react": "~16.8.0",
         "react-dom": "~16.8.0",
         "react-test-renderer": "~16.8.6",
-        "react-testing-library": "^5.2.3",
+        "react-testing-library": "^7.0.0",
         "rimraf": "^2.6.3"
     },
     "peerDependencies": {
diff --git a/packages/ra-core/src/util/HttpError.ts b/packages/ra-core/src/fetch/HttpError.ts
similarity index 100%
rename from packages/ra-core/src/util/HttpError.ts
rename to packages/ra-core/src/fetch/HttpError.ts
diff --git a/packages/ra-core/src/util/Mutation.spec.tsx b/packages/ra-core/src/fetch/Mutation.spec.tsx
similarity index 99%
rename from packages/ra-core/src/util/Mutation.spec.tsx
rename to packages/ra-core/src/fetch/Mutation.spec.tsx
index c83ba3c4601..e4334b49e83 100644
--- a/packages/ra-core/src/util/Mutation.spec.tsx
+++ b/packages/ra-core/src/fetch/Mutation.spec.tsx
@@ -10,7 +10,7 @@ import expect from 'expect';
 import Mutation from './Mutation';
 import CoreAdmin from '../CoreAdmin';
 import Resource from '../Resource';
-import TestContext from './TestContext';
+import TestContext from '../util/TestContext';
 
 describe('Mutation', () => {
     afterEach(cleanup);
diff --git a/packages/ra-core/src/fetch/Mutation.tsx b/packages/ra-core/src/fetch/Mutation.tsx
new file mode 100644
index 00000000000..d1923e7dc59
--- /dev/null
+++ b/packages/ra-core/src/fetch/Mutation.tsx
@@ -0,0 +1,53 @@
+import { FunctionComponent, ReactElement } from 'react';
+import useMutation from './useMutation';
+
+type DataProviderCallback = (
+    type: string,
+    resource: string,
+    payload?: any,
+    options?: any
+) => Promise<any>;
+
+interface ChildrenFuncParams {
+    data?: any;
+    loading: boolean;
+    error?: any;
+}
+
+interface Props {
+    children: (
+        mutate: () => void,
+        params: ChildrenFuncParams
+    ) => ReactElement<any, any>;
+    type: string;
+    resource: string;
+    payload?: any;
+    options?: any;
+}
+
+/**
+ * Craft a callback to fetch the data provider and pass it to a child function
+ *
+ * @example
+ *
+ * const ApproveButton = ({ record }) => (
+ *     <Mutation
+ *         type="UPDATE"
+ *         resource="comments"
+ *         payload={{ id: record.id, data: { isApproved: true } }}
+ *     >
+ *         {(approve) => (
+ *             <FlatButton label="Approve" onClick={approve} />
+ *         )}
+ *     </Mutation>
+ * );
+ */
+const Mutation: FunctionComponent<Props> = ({
+    children,
+    type,
+    resource,
+    payload,
+    options,
+}) => children(...useMutation(type, resource, payload, options));
+
+export default Mutation;
diff --git a/packages/ra-core/src/util/Query.spec.tsx b/packages/ra-core/src/fetch/Query.spec.tsx
similarity index 76%
rename from packages/ra-core/src/util/Query.spec.tsx
rename to packages/ra-core/src/fetch/Query.spec.tsx
index 27c3559d3d3..4316c066f44 100644
--- a/packages/ra-core/src/util/Query.spec.tsx
+++ b/packages/ra-core/src/fetch/Query.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {
     render,
     cleanup,
-    fireEvent,
+    act,
     // @ts-ignore
     waitForDomChange,
 } from 'react-testing-library';
@@ -10,7 +10,7 @@ import expect from 'expect';
 import Query from './Query';
 import CoreAdmin from '../CoreAdmin';
 import Resource from '../Resource';
-import TestContext from './TestContext';
+import TestContext from '../util/TestContext';
 
 describe('Query', () => {
     afterEach(cleanup);
@@ -31,22 +31,25 @@ describe('Query', () => {
     it('should dispatch a fetch action when mounting', () => {
         let dispatchSpy;
         const myPayload = {};
-        render(
-            <TestContext>
-                {({ store }) => {
-                    dispatchSpy = jest.spyOn(store, 'dispatch');
-                    return (
-                        <Query
-                            type="mytype"
-                            resource="myresource"
-                            payload={myPayload}
-                        >
-                            {() => <div>Hello</div>}
-                        </Query>
-                    );
-                }}
-            </TestContext>
-        );
+        act(() => {
+            render(
+                <TestContext>
+                    {({ store }) => {
+                        dispatchSpy = jest.spyOn(store, 'dispatch');
+                        return (
+                            <Query
+                                type="mytype"
+                                resource="myresource"
+                                payload={myPayload}
+                            >
+                                {() => <div>Hello</div>}
+                            </Query>
+                        );
+                    }}
+                </TestContext>
+            );
+        });
+
         const action = dispatchSpy.mock.calls[0][0];
         expect(action.type).toEqual('CUSTOM_FETCH');
         expect(action.payload).toEqual(myPayload);
@@ -93,14 +96,19 @@ describe('Query', () => {
                 )}
             </Query>
         );
-        const { getByTestId } = render(
-            <CoreAdmin dataProvider={dataProvider}>
-                <Resource name="foo" list={Foo} />
-            </CoreAdmin>
-        );
+        let getByTestId;
+        act(() => {
+            const res = render(
+                <CoreAdmin dataProvider={dataProvider}>
+                    <Resource name="foo" list={Foo} />
+                </CoreAdmin>
+            );
+            getByTestId = res.getByTestId;
+        });
         const testElement = getByTestId('test');
         expect(testElement.textContent).toBe('no data');
         expect(testElement.className).toEqual('loading');
+
         await waitForDomChange({ container: testElement });
         expect(testElement.textContent).toEqual('bar');
         expect(testElement.className).toEqual('idle');
@@ -124,13 +132,15 @@ describe('Query', () => {
                 )}
             </Query>
         );
-
-        const { getByTestId } = render(
-            <CoreAdmin dataProvider={dataProvider}>
-                <Resource name="foo" list={Foo} />
-            </CoreAdmin>
-        );
-
+        let getByTestId;
+        act(() => {
+            const res = render(
+                <CoreAdmin dataProvider={dataProvider}>
+                    <Resource name="foo" list={Foo} />
+                </CoreAdmin>
+            );
+            getByTestId = res.getByTestId;
+        });
         const testElement = getByTestId('test');
         expect(testElement.className).toEqual('loading');
         expect(testElement.textContent).toBe('no data');
@@ -157,14 +167,19 @@ describe('Query', () => {
                 )}
             </Query>
         );
-        const { getByTestId } = render(
-            <CoreAdmin dataProvider={dataProvider}>
-                <Resource name="foo" list={Foo} />
-            </CoreAdmin>
-        );
+        let getByTestId;
+        act(() => {
+            const res = render(
+                <CoreAdmin dataProvider={dataProvider}>
+                    <Resource name="foo" list={Foo} />
+                </CoreAdmin>
+            );
+            getByTestId = res.getByTestId;
+        });
         const testElement = getByTestId('test');
         expect(testElement.textContent).toBe('no data');
         expect(testElement.className).toEqual('loading');
+
         await waitForDomChange({ container: testElement });
         expect(testElement.textContent).toEqual('provider error');
         expect(testElement.className).toEqual('idle');
@@ -190,19 +205,21 @@ describe('Query', () => {
             </TestContext>
         );
         const mySecondPayload = { foo: 1 };
-        rerender(
-            <TestContext>
-                {() => (
-                    <Query
-                        type="mytype"
-                        resource="myresource"
-                        payload={mySecondPayload}
-                    >
-                        {() => <div>Hello</div>}
-                    </Query>
-                )}
-            </TestContext>
-        );
+        act(() => {
+            rerender(
+                <TestContext>
+                    {() => (
+                        <Query
+                            type="mytype"
+                            resource="myresource"
+                            payload={mySecondPayload}
+                        >
+                            {() => <div>Hello</div>}
+                        </Query>
+                    )}
+                </TestContext>
+            );
+        });
         expect(dispatchSpy.mock.calls.length).toEqual(2);
         const action = dispatchSpy.mock.calls[1][0];
         expect(action.type).toEqual('CUSTOM_FETCH');
@@ -230,19 +247,21 @@ describe('Query', () => {
                 }}
             </TestContext>
         );
-        rerender(
-            <TestContext>
-                {() => (
-                    <Query
-                        type="mytype"
-                        resource="myresource"
-                        payload={myPayload}
-                    >
-                        {() => <div>Hello</div>}
-                    </Query>
-                )}
-            </TestContext>
-        );
+        act(() => {
+            rerender(
+                <TestContext>
+                    {() => (
+                        <Query
+                            type="mytype"
+                            resource="myresource"
+                            payload={myPayload}
+                        >
+                            {() => <div>Hello</div>}
+                        </Query>
+                    )}
+                </TestContext>
+            );
+        });
         expect(dispatchSpy.mock.calls.length).toEqual(1);
     });
 });
diff --git a/packages/ra-core/src/fetch/Query.tsx b/packages/ra-core/src/fetch/Query.tsx
new file mode 100644
index 00000000000..bf2a959f39b
--- /dev/null
+++ b/packages/ra-core/src/fetch/Query.tsx
@@ -0,0 +1,66 @@
+import { FunctionComponent, ReactElement } from 'react';
+import useQuery from './useQuery';
+
+interface ChildrenFuncParams {
+    data?: any;
+    total?: number;
+    loading: boolean;
+    loaded: boolean;
+    error?: any;
+}
+
+interface Props {
+    children: (params: ChildrenFuncParams) => ReactElement<any, any>;
+    type: string;
+    resource: string;
+    payload?: any;
+    options?: any;
+}
+
+/**
+ * Fetch the data provider and pass the result to a child function
+ *
+ * @example
+ *
+ * const UserProfile = ({ record }) => (
+ *     <Query type="GET_ONE" resource="users" payload={{ id: record.id }}>
+ *         {({ data, loading, error }) => {
+ *             if (loading) { return <Loading />; }
+ *             if (error) { return <p>ERROR</p>; }
+ *             return <div>User {data.username}</div>;
+ *         }}
+ *     </Query>
+ * );
+ *
+ * @example
+ *
+ * const payload = {
+ *    pagination: { page: 1, perPage: 10 },
+ *    sort: { field: 'username', order: 'ASC' },
+ * };
+ * const UserList = () => (
+ *     <Query type="GET_LIST" resource="users" payload={payload}>
+ *         {({ data, total, loading, error }) => {
+ *             if (loading) { return <Loading />; }
+ *             if (error) { return <p>ERROR</p>; }
+ *             return (
+ *                 <div>
+ *                     <p>Total users: {total}</p>
+ *                     <ul>
+ *                         {data.map(user => <li key={user.username}>{user.username}</li>)}
+ *                     </ul>
+ *                 </div>
+ *             );
+ *         }}
+ *     </Query>
+ * );
+ */
+const Query: FunctionComponent<Props> = ({
+    children,
+    type,
+    resource,
+    payload,
+    options,
+}) => children(useQuery(type, resource, payload, options));
+
+export default Query;
diff --git a/packages/ra-core/src/util/fetch.spec.ts b/packages/ra-core/src/fetch/fetch.spec.ts
similarity index 100%
rename from packages/ra-core/src/util/fetch.spec.ts
rename to packages/ra-core/src/fetch/fetch.spec.ts
diff --git a/packages/ra-core/src/util/fetch.ts b/packages/ra-core/src/fetch/fetch.ts
similarity index 100%
rename from packages/ra-core/src/util/fetch.ts
rename to packages/ra-core/src/fetch/fetch.ts
diff --git a/packages/ra-core/src/fetch/hooks.ts b/packages/ra-core/src/fetch/hooks.ts
new file mode 100644
index 00000000000..aac901f52fd
--- /dev/null
+++ b/packages/ra-core/src/fetch/hooks.ts
@@ -0,0 +1,43 @@
+import { useReducer, useRef, useEffect } from 'react';
+import isEqual from 'lodash/isEqual';
+
+// thanks Kent C Dodds for the following helpers
+
+export function useSetState(initialState) {
+    return useReducer(
+        (state, newState) => ({ ...state, ...newState }),
+        initialState
+    );
+}
+
+export function useSafeSetState(initialState) {
+    const [state, setState] = useSetState(initialState);
+
+    const mountedRef = useRef(false);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => (mountedRef.current = false);
+    }, []);
+    const safeSetState = args => mountedRef.current && setState(args);
+
+    return [state, safeSetState];
+}
+
+export function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+
+export function useDeepCompareEffect(callback, inputs) {
+    const cleanupRef = useRef();
+    useEffect(() => {
+        if (!isEqual(previousInputs, inputs)) {
+            cleanupRef.current = callback();
+        }
+        return cleanupRef.current;
+    });
+    const previousInputs = usePrevious(inputs);
+}
diff --git a/packages/ra-core/src/fetch/index.ts b/packages/ra-core/src/fetch/index.ts
new file mode 100644
index 00000000000..b40038b4585
--- /dev/null
+++ b/packages/ra-core/src/fetch/index.ts
@@ -0,0 +1,19 @@
+import HttpError from './HttpError';
+import * as fetchUtils from './fetch';
+import Mutation from './Mutation';
+import Query from './Query';
+import useDataProvider from './useDataProvider';
+import useMutation from './useMutation';
+import useQuery from './useQuery';
+import withDataProvider from './withDataProvider';
+
+export {
+    fetchUtils,
+    HttpError,
+    Mutation,
+    Query,
+    useDataProvider,
+    useMutation,
+    useQuery,
+    withDataProvider,
+};
diff --git a/packages/ra-core/src/fetch/useDataProvider.ts b/packages/ra-core/src/fetch/useDataProvider.ts
new file mode 100644
index 00000000000..d516584ee6e
--- /dev/null
+++ b/packages/ra-core/src/fetch/useDataProvider.ts
@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import { Dispatch } from 'redux';
+// @ts-ignore
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+
+import { startUndoable } from '../actions/undoActions';
+
+/**
+ * Hook for getting an instance of the dataProvider as prop
+ *
+ * Injects a dataProvider function prop, which behaves just like
+ * the dataProvider function (same signature, returns a Promise), but
+ * uses Redux under the hood. The benefit is that react-admin tracks
+ * the loading state when using this function, and shows the loader animation
+ * while the dataProvider is waiting for a response.
+ *
+ * In addition to the 3 parameters of the dataProvider function (verb, resource, payload),
+ * the injected dataProvider prop accepts a fourth parameter, an object literal
+ * which may contain side effects, or make the action optimistic (with undoable: true).
+ *
+ * @example
+ *
+ * import React, { useState } from 'react';
+ * import { useDispatch } from 'react-redux';
+ * import { useDataProvider, showNotification } from 'react-admin';
+ *
+ * const PostList = () => {
+ *      const [posts, setPosts] = useState([])
+ *      const dispatch = useDispatch();
+ *      const dataProvider = useDataProvider();
+ *
+ *      useEffect(() => {
+ *          dataProvider('GET_LIST', 'posts', { filter: { status: 'pending' }})
+ *            .then(({ data }) => setPosts(data))
+ *            .catch(error => dispatch(showNotification(error.message, 'error')));
+ *      }, [])
+ *
+ *      return (
+ *          <Fragment>
+ *              {posts.map((post, key) => <PostDetail post={post} key={key} />)}
+ *          </Fragment>
+ *     }
+ * }
+ */
+const useDataProvider = () => {
+    const dispatch = useDispatch() as Dispatch;
+
+    return useMemo(
+        () => (type, resource: string, payload: any, meta: any = {}) =>
+            new Promise((resolve, reject) => {
+                const action = {
+                    type: 'CUSTOM_FETCH',
+                    payload,
+                    meta: {
+                        ...meta,
+                        resource,
+                        fetch: type,
+                        onSuccess: {
+                            ...get(meta, 'onSuccess', {}),
+                            callback: ({ payload: response }) =>
+                                resolve(response),
+                        },
+                        onFailure: {
+                            ...get(meta, 'onFailure', {}),
+                            callback: ({ error }) =>
+                                reject(
+                                    new Error(
+                                        error.message ? error.message : error
+                                    )
+                                ),
+                        },
+                    },
+                };
+
+                return meta.undoable
+                    ? dispatch(startUndoable(action))
+                    : dispatch(action);
+            }),
+        []
+    );
+};
+
+export default useDataProvider;
diff --git a/packages/ra-core/src/fetch/useMutation.ts b/packages/ra-core/src/fetch/useMutation.ts
new file mode 100644
index 00000000000..a5b4aac9564
--- /dev/null
+++ b/packages/ra-core/src/fetch/useMutation.ts
@@ -0,0 +1,83 @@
+import { useCallback, useEffect } from 'react';
+import { useSafeSetState } from './hooks';
+import useDataProvider from './useDataProvider';
+
+/**
+ * Returns a callback to fetch the data provider through Redux, usually for mutations
+ *
+ * The request starts when the callback is called.
+ *
+ * The return value updates according to the request state:
+ *
+ * - mount: { loading: false, loaded: false }
+ * - mutate called: { loading: true, loaded: false }
+ * - success: { data: [data from response], total: [total from response], loading: false, loaded: true }
+ * - error: { error: [error from response], loading: false, loaded: true }
+ *
+ * @param type The verb passed to th data provider, e.g. 'UPDATE'
+ * @param resource A resource name, e.g. 'posts', 'comments'
+ * @param payload The payload object, e.g; { id: 123, data: { isApproved: true } }
+ * @param meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ *
+ * @returns A tuple with the mutation callback and the request state]. Destructure as [mutate,  { data, total, error, loading, loaded }].
+ *
+ * @example
+ *
+ * import { useMutation } from 'react-admin';
+ *
+ * const ApproveButton = ({ record }) => {
+ *     const [approve, { loading }] = useMutation(
+ *         'UPDATE',
+ *         'comments',
+ *          { id: record.id, data: { isApproved: true } }
+ *     );
+ *     return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
+ * };
+ */
+const useMutation = (
+    type: string,
+    resource: string,
+    payload?: any,
+    meta?: any
+): [
+    () => void,
+    {
+        data?: any;
+        total?: number;
+        error?: any;
+        loading: boolean;
+        loaded: boolean;
+    }
+] => {
+    const [state, setState] = useSafeSetState({
+        data: null,
+        error: null,
+        total: null,
+        loading: false,
+        loaded: false,
+    });
+    const dataProvider = useDataProvider();
+    const mutate = useCallback(() => {
+        setState({ loading: true });
+        dataProvider(type, resource, payload, meta)
+            .then(({ data: dataFromResponse, total: totalFromResponse }) => {
+                setState({
+                    data: dataFromResponse,
+                    total: totalFromResponse,
+                    loading: false,
+                    loaded: true,
+                });
+            })
+            .catch(errorFromResponse => {
+                setState({
+                    error: errorFromResponse,
+                    loading: false,
+                    loaded: false,
+                });
+            });
+    }, [JSON.stringify({ type, resource, payload, meta })]); // deep equality, see https://github.com/facebook/react/issues/14476#issuecomment-471199055
+
+    return [mutate, state];
+};
+
+export default useMutation;
diff --git a/packages/ra-core/src/fetch/useQuery.ts b/packages/ra-core/src/fetch/useQuery.ts
new file mode 100644
index 00000000000..877b0996c04
--- /dev/null
+++ b/packages/ra-core/src/fetch/useQuery.ts
@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+import { useSafeSetState } from './hooks';
+import useDataProvider from './useDataProvider';
+
+/**
+ * Fetch the data provider through Redux
+ *
+ * The return value updates according to the request state:
+ *
+ * - start: { loading: true, loaded: false }
+ * - success: { data: [data from response], total: [total from response], loading: false, loaded: true }
+ * - error: { error: [error from response], loading: false, loaded: true }
+ *
+ * @param type The verb passed to th data provider, e.g. 'GET_LIST', 'GET_ONE'
+ * @param resource A resource name, e.g. 'posts', 'comments'
+ * @param payload The payload object, e.g; { post_id: 12 }
+ * @param meta Redux action metas, including side effects to be executed upon success of failure, e.g. { onSuccess: { refresh: true } }
+ *
+ * @returns The current request state. Destructure as { data, total, error, loading, loaded }.
+ *
+ * @example
+ *
+ * import { useQuery } from 'react-admin';
+ *
+ * const UserProfile = ({ record }) => {
+ *     const { data, loading, error } = useQuery('GET_ONE', 'users', { id: record.id });
+ *     if (loading) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return <div>User {data.username}</div>;
+ * };
+ *
+ * @example
+ *
+ * import { useQuery } from 'react-admin';
+ *
+ * const payload = {
+ *    pagination: { page: 1, perPage: 10 },
+ *    sort: { field: 'username', order: 'ASC' },
+ * };
+ * const UserList = () => {
+ *     const { data, total, loading, error } = useQuery('GET_LIST', 'users', payload);
+ *     if (loading) { return <Loading />; }
+ *     if (error) { return <p>ERROR</p>; }
+ *     return (
+ *         <div>
+ *             <p>Total users: {total}</p>
+ *             <ul>
+ *                 {data.map(user => <li key={user.username}>{user.username}</li>)}
+ *             </ul>
+ *         </div>
+ *     );
+ * };
+ */
+const useQuery = (
+    type: string,
+    resource: string,
+    payload?: any,
+    meta?: any
+): {
+    data?: any;
+    total?: number;
+    error?: any;
+    loading: boolean;
+    loaded: boolean;
+} => {
+    const [state, setState] = useSafeSetState({
+        data: null,
+        error: null,
+        total: null,
+        loading: true,
+        loaded: false,
+    });
+    const dataProvider = useDataProvider();
+    useEffect(() => {
+        dataProvider(type, resource, payload, meta)
+            .then(({ data: dataFromResponse, total: totalFromResponse }) => {
+                setState({
+                    data: dataFromResponse,
+                    total: totalFromResponse,
+                    loading: false,
+                    loaded: true,
+                });
+            })
+            .catch(errorFromResponse => {
+                setState({
+                    error: errorFromResponse,
+                    loading: false,
+                    loaded: false,
+                });
+            });
+    }, [JSON.stringify({ type, resource, payload, meta })]); // deep equality, see https://github.com/facebook/react/issues/14476#issuecomment-471199055
+
+    return state;
+};
+
+export default useQuery;
diff --git a/packages/ra-core/src/util/withDataProvider.ts b/packages/ra-core/src/fetch/withDataProvider.tsx
similarity index 53%
rename from packages/ra-core/src/util/withDataProvider.ts
rename to packages/ra-core/src/fetch/withDataProvider.tsx
index d1c42f5482f..a6383550e75 100644
--- a/packages/ra-core/src/util/withDataProvider.ts
+++ b/packages/ra-core/src/fetch/withDataProvider.tsx
@@ -1,46 +1,12 @@
-import { Dispatch, AnyAction } from 'redux';
-import { connect } from 'react-redux';
-import get from 'lodash/get';
-
-import { startUndoable } from '../actions/undoActions';
+import React from 'react';
 import { DataProvider } from '../types';
 
-interface DispatchProps {
+import useDataProvider from './useDataProvider';
+
+export interface DataProviderProps {
     dataProvider: DataProvider;
-    dispatch: Dispatch<AnyAction>;
 }
 
-const mapDispatchToProps = (dispatch): DispatchProps => ({
-    dataProvider: (type, resource: string, payload: any, meta: any = {}) =>
-        new Promise((resolve, reject) => {
-            const action = {
-                type: 'CUSTOM_FETCH',
-                payload,
-                meta: {
-                    ...meta,
-                    resource,
-                    fetch: type,
-                    onSuccess: {
-                        ...get(meta, 'onSuccess', {}),
-                        callback: ({ payload: response }) => resolve(response),
-                    },
-                    onFailure: {
-                        ...get(meta, 'onFailure', {}),
-                        callback: ({ error }) =>
-                            reject(
-                                new Error(error.message ? error.message : error)
-                            ),
-                    },
-                },
-            };
-
-            return meta.undoable
-                ? dispatch(startUndoable(action))
-                : dispatch(action);
-        }),
-    dispatch,
-});
-
 /**
  * Higher-order component for fetching the dataProvider
  *
@@ -76,7 +42,7 @@ const mapDispatchToProps = (dispatch): DispatchProps => ({
  *         const { posts } = this.state;
  *         return (
  *            <Fragment>
- *                {posts.map((post, index) => <PostDetail post={post} key={key} />)}
+ *                {posts.map((post, key) => <PostDetail post={post} key={key} />)}
  *            </Fragment>
  *         );
  *     }
@@ -88,10 +54,10 @@ const mapDispatchToProps = (dispatch): DispatchProps => ({
  *
  * export default withDataProvider(PostList);
  */
-const withDataProvider = <T>(Component) =>
-    connect<{}, DispatchProps, T>(
-        null,
-        mapDispatchToProps
-    )(Component as any);
+const withDataProvider = <P extends object>(
+    Component: React.ComponentType<P>
+): React.SFC<P & DataProviderProps> => (props: P) => (
+    <Component {...props} dataProvider={useDataProvider()} />
+);
 
 export default withDataProvider;
diff --git a/packages/ra-core/src/index.ts b/packages/ra-core/src/index.ts
index 0422262ee4e..60a57683f06 100644
--- a/packages/ra-core/src/index.ts
+++ b/packages/ra-core/src/index.ts
@@ -22,6 +22,7 @@ export {
 export * from './dataFetchActions';
 export * from './actions';
 export * from './auth';
+export * from './fetch';
 export * from './i18n';
 export * from './inference';
 export * from './util';
diff --git a/packages/ra-core/src/util/Mutation.tsx b/packages/ra-core/src/util/Mutation.tsx
deleted file mode 100644
index 6613dfb22a8..00000000000
--- a/packages/ra-core/src/util/Mutation.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Component, ReactNode } from 'react';
-import withDataProvider from './withDataProvider';
-
-type DataProviderCallback = (
-    type: string,
-    resource: string,
-    payload?: any,
-    options?: any
-) => Promise<any>;
-
-interface ChildrenFuncParams {
-    data?: any;
-    loading: boolean;
-    error?: any;
-}
-
-interface RawProps {
-    children: (mutate: () => void, params: ChildrenFuncParams) => ReactNode;
-    type: string;
-    resource: string;
-    payload?: any;
-    options?: any;
-}
-
-interface Props extends RawProps {
-    dataProvider: DataProviderCallback;
-}
-
-interface State {
-    data?: any;
-    loading: boolean;
-    error?: any;
-}
-
-/**
- * Craft a callback to fetch the data provider and pass it to a child function
- *
- * @example
- *
- * const ApproveButton = ({ record }) => (
- *     <Mutation
- *         type="UPDATE"
- *         resource="comments"
- *         payload={{ id: record.id, data: { isApproved: true } }}
- *     >
- *         {(approve) => (
- *             <FlatButton label="Approve" onClick={approve} />
- *         )}
- *     </Mutation>
- * );
- */
-class Mutation extends Component<Props, State> {
-    state = {
-        data: null,
-        loading: false,
-        error: null,
-    };
-
-    mutate = () => {
-        this.setState({ loading: true });
-        const { dataProvider, type, resource, payload, options } = this.props;
-        dataProvider(type, resource, payload, options)
-            .then(({ data }) => {
-                this.setState({
-                    data,
-                    loading: false,
-                });
-            })
-            .catch(error => {
-                this.setState({
-                    error,
-                    loading: false,
-                });
-            });
-    };
-
-    render() {
-        const { children } = this.props;
-        return children(this.mutate, this.state);
-    }
-}
-
-export default withDataProvider<RawProps>(Mutation);
diff --git a/packages/ra-core/src/util/Query.tsx b/packages/ra-core/src/util/Query.tsx
deleted file mode 100644
index a565961534c..00000000000
--- a/packages/ra-core/src/util/Query.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Component, ReactNode } from 'react';
-import { shallowEqual } from 'recompose';
-import withDataProvider from './withDataProvider';
-
-type DataProviderCallback = (
-    type: string,
-    resource: string,
-    payload?: any,
-    options?: any
-) => Promise<any>;
-
-interface ChildrenFuncParams {
-    data?: any;
-    total?: number;
-    loading: boolean;
-    error?: any;
-}
-
-interface RawProps {
-    children: (params: ChildrenFuncParams) => ReactNode;
-    type: string;
-    resource: string;
-    payload?: any;
-    options?: any;
-}
-
-interface Props extends RawProps {
-    dataProvider: DataProviderCallback;
-}
-
-interface State {
-    data?: any;
-    total?: number;
-    loading: boolean;
-    error?: any;
-}
-
-/**
- * Fetch the data provider and pass the result to a child function
- *
- * @example
- *
- * const UserProfile = ({ record }) => (
- *     <Query type="GET_ONE" resource="users" payload={{ id: record.id }}>
- *         {({ data, loading, error }) => {
- *             if (loading) { return <Loading />; }
- *             if (error) { return <p>ERROR</p>; }
- *             return <div>User {data.username}</div>;
- *         }}
- *     </Query>
- * );
- *
- * @example
- *
- * const payload = {
- *    pagination: { page: 1, perPage: 10 },
- *    sort: { field: 'username', order: 'ASC' },
- * };
- * const UserList = () => (
- *     <Query type="GET_LIST" resource="users" payload={payload}>
- *         {({ data, total, loading, error }) => {
- *             if (loading) { return <Loading />; }
- *             if (error) { return <p>ERROR</p>; }
- *             return (
- *                 <div>
- *                     <p>Total users: {total}</p>
- *                     <ul>
- *                         {data.map(user => <li key={user.username}>{user.username}</li>)}
- *                     </ul>
- *                 </div>
- *             );
- *         }}
- *     </Query>
- * );
- */
-class Query extends Component<Props, State> {
-    state = {
-        data: null,
-        total: null,
-        loading: true,
-        error: null,
-    };
-
-    callDataProvider = () => {
-        const { dataProvider, type, resource, payload, options } = this.props;
-        dataProvider(type, resource, payload, options)
-            .then(({ data, total }) => {
-                this.setState({
-                    data,
-                    total,
-                    loading: false,
-                });
-            })
-            .catch(error => {
-                this.setState({
-                    error,
-                    loading: false,
-                });
-            });
-    };
-
-    componentDidMount = () => {
-        this.callDataProvider();
-    };
-
-    componentDidUpdate = prevProps => {
-        if (
-            prevProps.type !== this.props.type ||
-            prevProps.resource !== this.props.resource ||
-            !shallowEqual(prevProps.payload, this.props.payload) ||
-            !shallowEqual(prevProps.options, this.props.options)
-        ) {
-            this.callDataProvider();
-        }
-    };
-
-    render() {
-        const { children } = this.props;
-        return children(this.state);
-    }
-}
-
-export default withDataProvider<RawProps>(Query);
diff --git a/packages/ra-core/src/util/index.ts b/packages/ra-core/src/util/index.ts
index 52f502471f7..03bc482572f 100644
--- a/packages/ra-core/src/util/index.ts
+++ b/packages/ra-core/src/util/index.ts
@@ -3,33 +3,23 @@ import FieldTitle from './FieldTitle';
 import getFetchedAt from './getFetchedAt';
 import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
 import ComponentPropType from './ComponentPropType';
-import HttpError from './HttpError';
 import linkToRecord from './linkToRecord';
-import Mutation from './Mutation';
-import Query from './Query';
 import removeEmpty from './removeEmpty';
 import removeKey from './removeKey';
 import resolveRedirectTo from './resolveRedirectTo';
 import TestContext from './TestContext';
 import warning from './warning';
-import withDataProvider from './withDataProvider';
-import * as fetchUtils from './fetch';
 
 export {
-    fetchUtils,
     downloadCSV,
     FieldTitle,
     getFetchedAt,
     getFieldLabelTranslationArgs,
     ComponentPropType,
-    HttpError,
     linkToRecord,
-    Mutation,
-    Query,
     removeEmpty,
     removeKey,
     resolveRedirectTo,
     TestContext,
     warning,
-    withDataProvider,
 };
diff --git a/yarn.lock b/yarn.lock
index 1888ad18cd5..37bc6b5bb27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6375,14 +6375,15 @@ dom-serializer@0, dom-serializer@~0.1.0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-testing-library@^3.12.0:
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-3.12.2.tgz#9828a94f6c505780bb1e1e9e29afd319594e01a4"
-  integrity sha512-kMj5UFm5lSxnMDtD6XWkJuzK0CX+XdMd5NSnvtpneeYQFORTF5Q5C6mdweH6hhwFcKYzAsHCfnvldg9c8HuFOA==
+dom-testing-library@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-4.0.1.tgz#f21ef42aea0bd635969b4227a487e4704dbea735"
+  integrity sha512-Yr0yWlpI2QdTDEgPEk0TEekwP4VyZlJpl9E7nKP2FCKni44cb1jzjsy9KX6hBDsNA7EVlPpq9DHzO2eoEaqDZg==
   dependencies:
+    "@babel/runtime" "^7.4.3"
     "@sheerun/mutationobserver-shim" "^0.3.2"
-    pretty-format "^23.6.0"
-    wait-for-expect "^1.0.0"
+    pretty-format "^24.7.0"
+    wait-for-expect "^1.1.1"
 
 dom-walk@^0.1.0:
   version "0.1.1"
@@ -13352,14 +13353,6 @@ pretty-error@^2.0.2, pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^23.6.0:
-  version "23.6.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
-  integrity sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==
-  dependencies:
-    ansi-regex "^3.0.0"
-    ansi-styles "^3.2.0"
-
 pretty-format@^24.7.0:
   version "24.7.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.7.0.tgz#d23106bc2edcd776079c2daa5da02bcb12ed0c10"
@@ -13972,12 +13965,13 @@ react-test-renderer@~16.8.6:
     react-is "^16.8.6"
     scheduler "^0.13.6"
 
-react-testing-library@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-5.2.3.tgz#c3be44bfa5eb1ba2acc1fb218785c40ebbdfe8ed"
-  integrity sha512-Bw52++7uORuIQnL55lK/WQfppqAc9+8yFG4lWUp/kmSOvYDnt8J9oI5fNCfAGSQi9iIhAv9aNsI2G5rtid0nrA==
+react-testing-library@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-7.0.0.tgz#d3b535e44de94d7b0a83c56cd2e3cfed752dcec1"
+  integrity sha512-8SHqwG+uhN9VhAgNVkVa3f7VjTw/L5CIaoAxKmy+EZuDQ6O+VsfcpRAyUw3MDL1h8S/gGrEiazmHBVL/uXsftA==
   dependencies:
-    dom-testing-library "^3.12.0"
+    "@babel/runtime" "^7.4.3"
+    dom-testing-library "^4.0.0"
 
 react-themeable@^1.1.0:
   version "1.1.0"
@@ -16705,10 +16699,10 @@ w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
-wait-for-expect@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.0.1.tgz#73ab346ed56ed2ef66c380a59fd623755ceac0ce"
-  integrity sha512-TPZMSxGWUl2DWmqdspLDEy97/S1Mqq0pzbh2A7jTq0WbJurUb5GKli+bai6ayeYdeWTF0rQNWZmUvCVZ9gkrfA==
+wait-for-expect@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.1.1.tgz#9cd10e07d52810af9e0aaf509872e38f3c3d81ae"
+  integrity sha512-vd9JOqqEcBbCDhARWhW85ecjaEcfBLuXgVBqatfS3iw6oU4kzAcs+sCNjF+TC9YHPImCW7ypsuQc+htscIAQCw==
 
 wait-on@^3.2.0:
   version "3.2.0"