HN2new | past | comments | ask | show | jobs | submitlogin

I want to see an article which shows how to code a fast rich text editor in React.

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?



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/


Maybe you could throttle, only take distinct changes and flatten into render? ;)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: