useEffect and useMutation error about conditional rendering of hooks

I am using t3 stack with tRPC, and I am trying to mark all emails as seen when the page loads by using useEffect, but this seems to give me an error about conditional rendering of hooks. Are there any other ways I can accomplish this?

  const { mutate: markAsSeen } = api.paMail.markAsSeen.useMutation({
    onError: () => {
      ToastComponent({ message: "Database error", type: "error" });
    },
  });

  useEffect(() => {
    markAsSeen({ sentTo: paPlayer!.id });
  }, [markAsSeen]);

  const { mutate: markAsSeen } = api.paMail.markAsSeen.useMutation({
    onError: () => {
      ToastComponent({ message: "Database error", type: "error" });
    },
  });

  useEffect(() => {
    markAsSeen({ sentTo: paPlayer!.id });
  }, [markAsSeen]);

6 Replies

Alex / KATT 🐱•2y ago

You probably have an if statement before usage of some hook

𝛈𝞂𝗿𝞈𝒆𝒈𝖏𝝰𝛈 𝐜0𝟃3𝗿OP•2y ago

No, it reports the error at this code: markAsSeen({ sentTo: paPlayer!.id }); I believe it is because I am calling a hook inside another hook @alex / KATT

Alex / KATT 🐱•2y ago

try upgrading to 10.27.2

Maj•2y ago

For me calling the useQuery hook in useEffect is not possible i get an error instantly

Alex / KATT 🐱•2y ago

can any of you make a reproduction? hard to help when i'm guessing the context

𝛈𝞂𝗿𝞈𝒆𝒈𝖏𝝰𝛈 𝐜0𝟃3𝗿OP•2y ago

I gave up and ended up using a button instead, it solved my issue Seems like calling a hook inside another hook is what causes it

useEffect and useMutation error about conditional rendering of hooks

Did you find this page helpful?