Comments (12)
If possible, you should provide components with a stable identity to avoid rerenders.
function Code({ node, className, children, ...props }) {
return (
<div className={className}>
{children}
</div>
)
}
export function Post({ post }) {
return (
<Markdown
rehypePlugins={[rehypeRaw, rehypeHighlight]}
components={{code: Code}}
>
{post.content}
</Markdown>
)
}
Also, if possible, you should provide props with a stable identity to reduce rerenders even further.
function Code({node, className, children, ...props}) {
return (
<div className={className}>
{children}
</div>
)
}
const components = {
code: Code
}
const rehypePlugins = [
rehypeRaw,
rehypeHighlight
]
export function Post({ post }) {
return (
<Markdown
rehypePlugins={rehypePlugins}
components={components}
>
{post.content}
</Markdown>
)
}
from react-markdown.
The solution is you can contribute to open source and figure out a solution instead of spamming duplicate info.
good advice
from react-markdown.
This memory leak appears to happen by simply including rehype-remark, even without any actual highlighted content.
If possible, you should provide components with a stable identity to avoid rerenders.
This does not noticeably address the leak in my testing
As others suggest, my current workaround is to use v6.
from react-markdown.
can reproduce in https://remarkjs.github.io/react-markdown/
just type freely in the editor and a large increase of memory will be found
from react-markdown.
Thanks @zzzgydi and @immccn123!
Memory should not be ballooning in that way.
Would either of you be interested in tracing this further and potentially opening a PR? https://developer.chrome.com/docs/devtools/memory-problems
from react-markdown.
I’m pretty sure V8 and friends actually use up as much memory as they can before freeing it? Maybe you’re seeing memory being used?
from react-markdown.
I guess that lowlight
has registered languages internally, but did not unregisterLanguage. After creating multiple instances like this may cause memory leaks.
Below I have written three comparative examples. In my understanding, if there is no memory leak, the memory should be released after 100 iterations of the for loop.
import { createLowlight, common } from "lowlight"; // version: ^3.1.0
import HighlightJs from "highlight.js"; // version: ^11.9.0
import "./App.css";
function customCreateLowlight(grammars: typeof common) {
const high = HighlightJs.newInstance();
if (grammars) {
Object.keys(grammars).forEach((name) =>
high.registerLanguage(name, grammars[name])
);
}
return high;
}
function App() {
return (
<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
<button
type="button"
onClick={() => {
for (let i = 0; i < 100; i++) {
const lowlight = createLowlight(common);
}
}}
>
createLowlight
</button>
<button
type="button"
onClick={() => {
for (let i = 0; i < 100; i++) {
const lowlight = customCreateLowlight(common);
}
}}
>
customCreateLowlight
</button>
<div>
<button
type="button"
onClick={() => {
for (let i = 0; i < 100; i++) {
const lowlight = customCreateLowlight(common);
Object.keys(common).forEach((name) =>
lowlight.unregisterLanguage(name)
);
}
}}
>
customCreateLowlight & unregisterLanguage
</button>
</div>
</div>
);
}
export default App;
I obtained the following results. The results are divided into three rounds. First, I refresh the page, recorded, and then click on the button to run once, and recorded next.
Through the above graph, it is a comparison of the results between snapshot 6 and snapshot 5. The largest occupation is string type, and these values are related to language settings within highlightjs.
from react-markdown.
After creating multiple instances like this may cause memory leaks.
If there is indeed a memory leak instead of chrome using up the memory it can use up, then that seems like a highlightjs issue?
It’s JavaScript; you’re not supposed to need to manage your own memory by removing registered things. The language does garbage collection for you.
from react-markdown.
I met the same problem, v7 did not work well when v6 was ok.
Is there any solutions for this problem?
from react-markdown.
The solution is you can contribute to open source and figure out a solution instead of spamming duplicate info.
from react-markdown.
Did anyone find a solution for that?
I am using that code and yes there is a weird memory leak because it renders code blocks over and over:
<Markdown rehypePlugins={[rehypeRaw, rehypeHighlight]} components={{
code({node, className, children, ...props}) {
return <div className={className}>
{children}
</div>
},
}}>
{post.content}
</Markdown>
from react-markdown.
I'm not sure if anyone else has run into this, but one thing of note is if you downgrade to rehype-highlight 6.0.0 you get a TS error similar to this:
The code works fine with no memory leak, and you can add @ts-expect-error to get rid of it as per the above thread, but I'm curious if there's a better solution.
from react-markdown.
Related Issues (20)
- text not created as hyperlink HOT 6
- Possible inconsistency with handling emphasis and strong when immediately followed by emphasis HOT 3
- p component overriding img component HOT 4
- A 11k star makrdown widget can not have a copy button at code block?
- How render image in cneter? HOT 3
- rermarkgfm showing tasklist wrong HOT 21
- \n Doesn't work properly HOT 8
- Tables do not display correctly when they have spaces at the beginning (remark-gfm) HOT 2
- Code is wrapped in an exrea <pre> even with a custom component HOT 9
- Custom Components Always Re-rendered HOT 4
- Not compatible to Chrome 90 or older HOT 9
- How to append content ,not cover? HOT 2
- When using two **enclosed bold texts containing colons, react-markdown fails to correctly parse the bold syntax. HOT 3
- Please add syntax for `{.tabset} ` HOT 2
- Typescript error while using syntax hightlight part code from README.md HOT 4
- sup element rendering with remark-gfm plugin is painfully slow. HOT 7
- React 18.3.0/19.0.0 support for react-markdown ^6.0.0 HOT 2
- React-markdown isn't rendering phone number links anymore HOT 3
- rst support HOT 2
- Can't drag-over select text to copy a section HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-markdown.