Issues with TeX component always re-rendering

[jaltekruse]

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]

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

[jaltekruse]

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.

facebook/react-devtools#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]

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.

#46

[jaltekruse]

@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?