Memory leak with react in vite for useInterval when setState is static

[arturcarvalho]

Describe the bug

I'm having an issue with a vite deployment and I believe I have a memory leak.

The code used is the following:

type IntervalFunction = () => unknown | void;

/** If delay is null, do not execute */
export function useInterval(callback: IntervalFunction, delay: number | null) {
  const savedCallback = useRef<IntervalFunction | null>(null);

  // Remember the latest callback.
  useEffect(() => {
    if (delay === null) return;
    savedCallback.current = callback;
  });

  // Set up the interval.
  useEffect(() => {
    if (delay === null) return;
    function tick() {
      if (savedCallback.current !== null) {
        savedCallback.current();
      }
    }
    const id = setInterval(tick, delay);
    return () => clearInterval(id);
  }, [delay]);
}

function App() {
  const [charge, setCharge] = useState<number>(24);
  const [direction, setDirection] = useState<'up' | 'down' | 'static'>('up');

  function updateRemainingCharge() {
    setCharge((prev) => {
      if (direction === 'up') return prev + 1;
      if (direction === 'down') return prev + 1;

      return prev;
    });
  }

  useInterval(updateRemainingCharge, 5);

  const up = () => setDirection('up');
  const down = () => setDirection('down');
  const stat = () => setDirection('static');

  return (
    <div>
      <h1>{charge}</h1>
      <button onClick={up}>up</button>
      <button onClick={down}>down</button>
      <button onClick={stat}>static</button>
    </div>
  );
}

export default App;

If I create a project with e.g. npm create vite@latest ovp -- --template react-ts, it will create what it seems like a memory leak when I run it and press the static button:

I know I could use useCallback with direction as a dependency to optimize it. But shouldn't it work without it?

I have the issue locally, on vercel but not on stackblitz, so my assumption is that it is a vite issue.

This issue has been causing me a lot of headaches and any help would be greatly appreciated!

Thank you and thank you for vite!
Artur

Reproduction

https://ovp-two.vercel.app/

Steps to reproduce

Example with issue: https://ovp-two.vercel.app/

• Open the url
• Open the memory tab
• Create heap snapshots and change the dropdown from summary to comparison

The memory starts to go up.

Example without issue: https://stackblitz.com/edit/vitejs-vite-ttumna?file=src%2FApp.css,src%2FApp.tsx&terminal=dev

• Open the url
• Open the memory tab
• Create heap snapshots and change the dropdown from summary to comparison

The memory does not start to go up.

System Info

System:
    OS: macOS 14.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 80.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 124.0.6367.60
    Safari: 17.4
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1
    vite: ^5.2.0 => 5.2.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-ttumna (Open reproduction)

[sapphi-red]

I don't think Vite is involved here. If you mean it happens after vite build but not in vite, I guess it's because react runs in development mode in vite and production mode in vite build.

[arturcarvalho]

Thank you for the reply @sapphi-red . My hope was that there was some different thing going on with stackblitz vite's configuration, but I think it's just the way the memory tab works with sandboxes on chrome. What I tried:

1. use vite and npm run dev locally (has leak)

2. use vite and deploy and npm run build on vercel (has leak)

3. use nextjs and npm run dev locally (has leak)

4. use nextjs and npm run build + npm run start locally so local build (has leak)

5. use vite on stackblitz (no leak)

6. use vite on codesandbox (no leak)

Here's the repo if someone is interested in checking it: https://github.com/arturcarvalho/ovp.

I'd like to keep it open for a bit longer, but if you think it makes more sense to close it, feel free to do it.

Anyway thank you and have a nice day.