Handling rerendering and useMutation

Hi all, currently when wanting to force a rerender on a mutation I move the mutation up in state and pass it as a callback down to the component that needs to trigger it. This often results in prop drilling and coupled state. What is a better approach?

Simplified example:

const Chat = () => {
  const { mutate: addMessage } = useAddMessage();

  return(
   <ChatHeader>
   <ChatMessages>
   <ChatInput addMessage={addMessage}>
  );
}

const Chat = () => {
  const { mutate: addMessage } = useAddMessage();

  return(
   <ChatHeader>
   <ChatMessages>
   <ChatInput addMessage={addMessage}>
  );
}

The

useAddMessage

useAddMessage

hook inserts the message into the cache of an

InfiniteQuery

InfiniteQuery

using

setQueryData

setQueryData

Using version

4.24.6

4.24.6

TanStack•2y ago•

29 replies

primary-violet

Handling rerendering and useMutation

const Chat = () => {
  const { mutate: addMessage } = useAddMessage();

  return(
   <ChatHeader>
   <ChatMessages>
   <ChatInput addMessage={addMessage}>
  );
}

const Chat = () => {
  const { mutate: addMessage } = useAddMessage();

  return(
   <ChatHeader>
   <ChatMessages>
   <ChatInput addMessage={addMessage}>
  );
}

The

useAddMessage

useAddMessage

hook inserts the message into the cache of an

InfiniteQuery

InfiniteQuery

using

setQueryData

setQueryData

Using version

4.24.6

4.24.6

Handling rerendering and useMutation

Similar Threads

Handling rerendering and useMutation

Similar Threads

Similar Threads

Similar Threads