Re:Performance Engineering with React, Part 1
by saifelse on Friday February 05, 2016 @01:07AM
(#11039835)
Building a fast rich text editor in React is no easy task, and would be at least a series of articles :-P. At Benchling we've built a fairly fast rich text editor in React--but it was a considerable amount of work and still requires quite a bit more work. You may have heard that Atom was originally written in React, but they abandoned it to avoid its overhead[0]
There are open-source projects worth looking at like Ritzy[1] which is quite fast and written in React from what I've read.
As per your specific issue, I've found that using PureRenderMixin with each line of text represented as a component works for hundreds of lines, but this still ends up with performance issues as you scale to thousands of lines. Using a list of one-character components will run into performance issues much sooner as there is per-component overhead.
[0] https://github.com/atom/atom/pull/5624 [1] http://ritzyed.github.io/ritzy/
I tried to implement one by representing the text as a long list of character components, thinking react could handle this by only executing small incremental updates, but the whole thing became slow anyway.
Am I missing something, or is react not up to this task?