Skip to content

Don't pass useMutation result to dep arrays #2367

Description

@david-crespo

As I learned in #2360 (comment), the object returned by useMutation is not referentially stable — it is remade on every render. But I thought it was, so we're using it in a lot of dependency arrays. We basically need to go through every useApiMutation call and check if the mutation is being included in a dependency array, and change it to depend directly on the relevant property instead, like the mutate function (which is stable). Unfortunately I can't think of a way to lint this, so we'll just have to try to do it as goodly as we can.

const deleteImage = useApiMutation('imageDelete', {
onSuccess(_data, variables) {
addToast({ content: `${variables.path.image} has been deleted` })
queryClient.invalidateQueries('imageList')
},
})
const makeActions = useCallback(
(image: Image): MenuAction[] => [
{
label: 'Demote',
onActivate: () => setDemoteImage(image),
},
{
label: 'Delete',
onActivate: confirmDelete({
doDelete: () => deleteImage.mutateAsync({ path: { image: image.name } }),
label: image.name,
}),
},
],
[deleteImage]
)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions