useEffect cleanup triggering multiple times after updates?
akbr opened this issue · 2 comments
akbr commented
While trying to troubleshoot this issue, I noticed that hmr updates seem to be triggering redundant useEffect cleanup calls.
import { useState, useEffect } from 'preact/hooks';
export function App() {
const [count, setCount] = useState(0);
const inc = () => setCount((x) => x + 1);
return <InnerApp count={count} inc={inc} />;
}
function InnerApp({ count, inc }) {
useEffect(() => {
console.log('Effect run');
return () => console.log('Effect cleanup');
});
return (
<div>
<div>Count is: {count}</div>
<button onClick={inc}>Increment</button>
</div>
);
}If I click "Increment" 20 times, and then trigger an HMR update, the useEffect cleanup will run 20 (additional) times:
Sandbox: https://stackblitz.com/edit/vitejs-vite-dxlaxr?file=src%2Fapp.jsx&terminal=dev
JoviDeCroock commented