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