+
+ )
+};
+```
+
+By using `useGetList`, you gain various benefits beyond a simple `fetch`: it handles user credentials, triggers loading indicators, manages loading states, handles errors, caches results for future use, and controls the data shape, among other things.
+
+Whenever you need to communicate with a server, you will use these providers. Since they are specialized for their respective domains and tightly integrated with react-admin, they will save you a significant amount of time and effort.
+
+## Composition
+
+React-admin avoids components that accept an overwhelming number of props, which are often referred to as "God Components." Instead, react-admin encourages the use of composition, where components accept subcomponents (either through children or specific props) to handle a share of the logic.
+
+This approach enables you to override specific parts of the logic of a component by composing it with another component.
+
+For instance, the `Found {total} posts matching your query
+-
+ {data.map(record => (
+
- {record.title} + ))} +
+
+);
+```
+
+## Hooks
+
+`ra-core` consists of hooks and headless components that hide the framework's implementation details, allowing you to focus on your business logic.
+
+For example, the `useDeleteWithConfirmController` button used in `pessimistic` mode renders a confirmation dialog when clicked and then calls the `dataProvider.delete()` method for the current record. If you want the same feature but with a different UI, you can use the `useDeleteWithConfirmController` hook:
+
+```jsx
+import { useDeleteWithConfirmController, useRecordContext, useResourceContext } from 'ra-core';
+import { Button, Confirm } from 'my-awesome-ui-library';
+
+const DeleteButton = () => {
+ const resource = useResourceContext();
+ const record = useRecordContext();
+ const {
+ open,
+ isPending,
+ handleDialogOpen,
+ handleDialogClose,
+ handleDelete,
+ } = useDeleteWithConfirmController({ redirect: 'list' });
+
+ return (
+
+
+ - `](./ListTutorial.md) displays a list of records
+- [`
- {data[id].title} + ))} +
- Name: {user.name} +
- Email: {user.email} +
- ` component:
+
+```jsx
+import { List, DataTable } from 'react-admin';
+
+const PostList = () => (
+
-
+
- ` component will call `dataProvider.getList('posts')` to fetch the list of posts and create a `ListContext` to store the data. The `
- ` and other page components don't just fetch data; they provide a way to update the page settings:
+
+- Sort field and order
+- Current page & page size
+- Filters
+- Record selection
+
+The [`ListContext`](./useListContext.md) exposes callbacks to update these settings, and `
- `'s children components like `
- `, `
-
++
-
+
- `](./List.md) component. It fetches a list of records from the data provider and delegates the rendering to its child component (often a [`
-
+
- ` also lets you customize the UI for filters and pagination. As for `
+
+ 
+
+ <DataTable>
+ |
+
+
+ 
+
+ <DatagridAG>
+ |
+
+
+ 
+
+ <SimpleList>
+ |
+
+
+ 
+
+ <Calendar>
+ |
+
+
+ 
+
+ Filter Button/Form Combo
+ |
+
+
+ 
+
+ <FilterList> Sidebar
+ |
+
+
+ 
+
+ <StackedFilters> Dialog
+ |
+
+
+ 
+
+ Global <Search>
+ |
+
- ` component, which offer type-specific features:
+
+- [`
+
+ 
+
+ <SimpleShowLayout>
+ |
+
+
+ 
+
+ <TabbedShowLayout>
+ |
+
- ` and other page components render their children (e.g., `
+
+ );
+};
+```
+
+If you want to use react-admin components, prefer the Base components, which call the hooks internally and store the values in a context:
+
+```jsx
+import { ListBase, DataTable } from 'react-admin';
+
+const MyList = () => (
+ Posts
+-
+ {ids.map(id => (
+
Total: {total}
+- ` and `
-
+