useStore React Instability

Hi All,

I’m using Framework7 on React.

If I use it this way, my component is rendered exactly three times. More than once.

async getMail({ state }, { mailId }) {
  const req = await fetch(`https://example.com/mailId`);
  const res = await req.json();
  state.mail = res.data;
 }

Without using Fetch, like this:

async getMail({ state }, { mailId }) {
  state.mail = state.messages.find(msg => msg.id === mailId);
 }

If I use fetch it renders three times, one more and react gives a warning:

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Component I get error:

import { Navbar, NavTitle, Page, useStore } from "framework7-react";
import { memo, useEffect } from "react";
import store from "../store";

function MailPage({ mailId }) {
  const mail = useStore("mail");
  console.log("Rendered!");
  
  useEffect(() => {
    store.dispatch("getMail", { mailId });
  }, []);

  return (
    <Page>
      <Navbar backLink="Back">
        <NavTitle>{"mail.subject"}</NavTitle>
      </Navbar>
    </Page>
  );
}

export default memo(MailPage);