Poor performance on re-render

[samuela]

Describe the bug
Any time React does a re-render on the SyntaxHighlighter component, the component does a full re-parse, re-highlight of the entire document even when the document hasn't changed. The most egregious offender is getCodeTree and next up is processLines.

I think the fix here is to simply wrap these in useMemo.

To Reproduce
Steps to reproduce the behavior:

1. Render a large file.
2. Note that re-renders are still very slow.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Video: https://youtu.be/N01PEn3BZIk

Desktop (please complete the following information):

• OS: macOS 10.15.4
• Browser Chrome, FireFox

Additional context
Add any other context about the problem here.

[ygorduraes]

I'm having this same problem with large files. I still haven't found a workaround for this issue.

[travisdahl]

Having the same issue. Unusable with large files.

[francostramana]

Any solution? It's really a big problem.

[karlhorky]

I think this may be fixed by #394 by @xiangst0816

This has been merged, but not yet released (maybe it will become 15.4.6)

cc @conorhastings

[simmerer]

15.5.0 (released this morning) contains @xiangst0816 's fix from #394

[karlhorky]

Thanks @simmerer !

[iampava]

I don't think this is fixed. The correct solution, as mentioned here #303 should be useMemo

A hack I did in my app, that helped is to actually memoize the component myself

const memoizedHighlighter = useMemo(
      () => (
        <SyntaxHighlighter>
          {code}
        </SyntaxHighlighter>
      ),
      [code]
    );

 return (
      <div>
        {memoizedHighlighter}
      </div>
    );