search

Khan / react-components

khan.github.io/react-components/
MIT License
1.01k stars 99 forks source link

Issues with TeX component always re-rendering #65

Open jaltekruse opened 7 years ago

jaltekruse commented 7 years ago

Hello Khan Team!

I am trying to use the TeX component to render some expressions in my react application. I am experiencing some performance issues, as I am trying to render many expressions on a single page. In this particular case, one time rendering cost isn't too concerning, and I can mitigate some of the time with pagination. I still want to expose several hundred expressions in an individual page of the app.

The problem I am seeing is that the TeX component always re-renders even though the PureRenderMixin is included. Even adding a shouldComponentUpdate method to the component that always returns false, doesn't seem to stop the re-rendering every time any part of the tree is rendered.

I am trying to understand the way that mathjax and katex both manage their rendering lifecycles relative to react. Any help you can provide pointing me at the code I could try modifying to reduce the re-rendering would be appreciated. Happy to contribute back any fixes I am able to make.

I have made a short video showing the react browser plugin tracing the extra rendering in the perseus demo instance.

You can see in the video that the plain text sections of the excercise are not re-rendering. https://www.youtube.com/watch?v=oyZBhp7HVg8&feature=youtu.be

kevinbarabash commented 7 years ago

Interesting. Is render() still being called or is the update to the DOM happening outside of render()?

jaltekruse commented 7 years ago

I am not seeing a call to render upon adding a few console log statements. I am just seeing calls to shouldComponentUpdate.

From this thread it looks like the devtools may be highlighting for updates regardless of actual calls to render, as they cannot detect if shouldComponentUpdate returned false.

https://github.com/facebook/react-devtools/issues/337

That being said, I'm still seeing lagging performance while editing unrelated components in the DOM. It seems like something triggered by the react rendering has to be prompting the extra processing, as I'm not seeing laggy scroll performance once the page is fully rendered. Will continue to try to add more debugging traces to try to figure out what is going on.

jaltekruse commented 7 years ago

From this conversation, it looks like the DOM update is happening outside of render, or it least it was at that time. I am not seeing calls to componentDidUpdate in my testing, but I will keep trying stuff out.

https://github.com/Khan/react-components/issues/46

jaltekruse commented 7 years ago

@spicyj I saw on your personal site that you are no longer working at Khan, but do you have any possible insights you could provide here?