uiwjs / uiwjs/react-codemirror

BUG: Memory Leak when rerendering CodeMirror

Open
#484 2 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
161
PR merge metrics
No merged PRs in 30d

Description

Hey yall,

I think i found a memory leak in the CodeMirror Component...

You can find the PoC in the following Codesandbox:

CAREFUL: It will fill up your memory in just few minutes...
I used a quite small interval as well as many CodeMirror to speed up the process...

https://codesandbox.io/s/gallant-danilo-nc8euu?file=/src/App.js

Memory usage:
image
~1 min later:
image

It seems like Firefox is more affected by this than Chrome.. Chromes memory fills up way slower...

The workaround that i use is the following:
Instead of:

<CodeMirror
   theme={theme.colorScheme}
   height="500px"
   value={originalFilters}
   //defaultValue={originalFilters}
   placeholder={placeholder}
   onChange={setCurrentFilters}
   readOnly={readOnly}
 />

I use a memo:

<CodeMirrorMemo
  theme={theme.colorScheme}
  height="500px"
  value={originalFilters}
   //defaultValue={originalFilters}
  placeholder={placeholder}
   onChange={setCurrentFilters}
   readOnly={readOnly}
  
                />
                
const CodeMirrorMemo = memo(CodeMirror)

I'm not sure what else i could provide right now but feel free to request whatever else i can provide to help out. Thank you :)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and compare rerendering behavior in Firefox and Chrome. Investigate the CodeMirror component involved in the repeated renders, using the reported memo workaround as a comparison. Done means the reproduction no longer causes unbounded memory growth without requiring consumers to wrap the component in memo.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.