Skip to content

useMutation returns a new object on every call #1858

Closed
@ashleymercer

Description

@ashleymercer

Describe the bug

If I'm reading the code right, I think the useMutation function creates a new object on every call - so if this object is used directly in the dependency array for any further React hooks, it will trigger additional renders.

To Reproduce

function FooComponent() {
  const callback    = useCallback(() => Promise.resolve("done"), []);
  const mutation    = useMutation(callback);
  const mutationRef = useRef(mutation);

  useEffect(() => {
    if (mutationRef.current !== mutation) {
      console.log(`This should never get logged`);
    }
  })

  return <></>
}

Expected behavior

The log line should never fire: the arguments to useMutation never change so I would expect the same reference back each time (I think this is similar to how useQuery works - at least, I don't seem to have the same issue there).

Additional context
Looking at the current code would it be sufficient to memoise the returned object on currentResult and mutate? Or would that likely cause further problems?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions