How to use hookstore to avoid this error?
gitcatrat opened this issue · comments
Error I'm getting in console:
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.
Error location in hookstore code:
this.setters.forEach(function (setter) {
return setter(_this.state);
});
Here's the situation that fails:
PS! Also tried to pass dispatch/user store array directly to button as prop, same thing.
function Header() {
const [user, dispatch] = useStore('user');
return (
<div>
{/* other stuff.. */}
{user.loggedIn && (
<LogoutButton />
)}
</div>
);
}
function LogoutButton() {
// this component doesn't exist anymore after
// dispatch runs, hookstore still tries to update it?
const [user, dispatch] = useStore('user');
function logout() {
// sets user.loggedIn to false
dispatch({type: 'logout'});
}
return (
<button onClick={logout}>Logout</button>
);
}
Ah, could be a false alarm unless you already want to make this package future proof.
I was running concurrent mode with latest experimental React release.
Hey! Concurrent mode is still something I plan on supporting, right now this warn will exist. That said, it's inside a try catch and it won't stop execution of your app, I'm only logging the error