Skip to content

Don't pass useMutation result to dep arrays #2367

@david-crespo

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]
)

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions