Skip to content

useRefresh

This hook returns a function that forces a refetch of all the active queries, and a rerender of the current view when the data has changed.

import { useRefresh } from 'ra-core';
const RefreshButton = () => {
const refresh = useRefresh();
const handleClick = () => {
refresh();
}
return <button onClick={handleClick}>Refresh</button>;
};

It is common to use it after a mutation, e.g. after deleting a record.

import * as React from 'react';
import { useDelete, useNotify, useRefresh, useRecordContext } from 'ra-core';
const DeleteCommentButton = () => {
const refresh = useRefresh();
const record = useRecordContext();
const notify = useNotify();
const [deleteOne, { isPending }] = useDelete(
'comments',
{ id: record.id },
{
onSuccess: (data) => {
refresh();
notify('Comment deleted');
},
onError: (error) => {
notify(`Comment deletion error: ${error.message}`, { type: 'error' });
},
}
);
return <button onClick={() => deleteOne()} disabled={isPending}>Delete</button>;
};