Feed components are being re-rendered every few seconds and during scrolling

[maxceem]

1. I've noticed that at the project dashboard page all Feed components are being re-rendered every few seconds.

To reproduce:

• see project http://local.topcoder-dev.com:3000/projects/2871 on the local machine
• and add console.log('feed render') at the render method https://github.com/appirio-tech/connect-app/blob/dev/src/components/Feed/Feed.jsx#L38

And you will see that every few seconds all 29 Feed components on this page will be re-rendered.

This component is quite heavy by itself. Also on this page we use script for sticky sidebar. And after implementing fullscreen mode for channels there will be also one more script to implement date sticking to the header of the during scrolling ilke in Slack http://take.ms/Wyu5w

I didn't make proper tests, but constant re-rendering could affect smoothness of the scrolling scripts.

2. Also feeds are being re-rendering during scrolling. And sidebar sticking and scrolling not smoothly for me. Not sure if the Feed re-rendring is cousing sricky sidebar glitches though http://take.ms/Z78ic

[vic-georgiev]

I think you're very correct. The components are not constructed to be optimal, and we can update the architecture. If we upgrade to latest React there are a lot more optimizations we can do. In terms of html code rendered we could potentially remove some of the wrappers we introduce everywhere with the use of Fragments.

In regards with the sticky sidebar, we might want to rethink how we approach the sidebar on desktop. I am thinking that we might want to make it scrollable on its own vs. the sticky behavior we experience today. That is just natural moving forward with a sidebar, and the optimizations we can achieve there. I am very annoyed by the jumping behavior we experience today.

From a rendering perspective our CSS isn't using Grids as well, and as much as I like Flex, our interface would be a better case for CSS Grids going forward.

I'll be more than happy to see work on improvements on the front-end rendering and optimizations. @vikasrohit @RishiRajSahu do you guys think we can have a good plan for those optimizations and execute them? I suspect @maxceem is going to be guiding this effort as he's diving deeper into the performance.

[maxceem]

3. Also, I've noticed that typing is very slow when there are several topic threads. I've checked that every time we type a symbol all the threads are rerendered. In the next video, I quickly type the same latter with the same interval but letters appear in batches rather one by one http://take.ms/wA1u2

4. Also sticky dates, which I'm currently implementing for fullscreen mode looks like heavily affected by re-rendres. As I've only implemented changing date in the header to the current one, and it already takes noticable time after scrolling for the date to be updated http://take.ms/EeSku
   But actually date has to be not only updated, but also move with scrolling content.

@vic-topcoder So I'll try to fix this particular re-rendering issue, as otherwise sticky dates wouldn't work properly.

Imho, updating React version could require connect-app code updates and also some packes could be need to be updated or replaced if they don't support React 16.

[vikasrohit]

@maxceem Agreed, we have to fix the re-rendering of all threads. And I would not like to go with React upgrade as now because we are already doing the heavy lifting in current and upcoming releases. We need a dedicate release of at least 3 weeks for doing the upgrade.

@vic-topcoder I think it is not a problem of architecture, it is just matter of things being slowly complicated from the day we started with very simple UI. I think it is quite difficult to anticipate every possibility of complexity on the day one. It would keep on circling in loop of things being not optimal and then improving it.

[vic-georgiev]

Also a good read about performance https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4 - they highlight several ways/techniques to improve/reduce trashing and re-rendering. I think we didn't use pure components (haven't seen any declarations during my hunting for CSS, might be wrong), which might increase things. Also - moving to a latest release of React would help with the rendering as there's a lot of rendering optimizations under the hood.

[maxceem]

So far as I see, these issues can be fixed by refactoring FeedContainer.

I've fixed re-renders when the page is scrolled by commit 048e089. It's enough for me to continue with the main task of sticky dates.

There is still re-rendering when we type comments/topics which makes typing very slow see for example this project https://connect.topcoder-dev.com/projects/2871 and try to type a new topic title.

Let me know if you'd like it to be fixed during Connect 2.4.4 milestone

[vikasrohit]

Thanks a lot @maxceem for the render fix. Yes, we would like to get it fixed for 2.4.4 milestone.

Please feel free to create separate issue for fixing the pending part of render issue.

[maxceem]

Separate issues created to fix typing issue #2185

This one is done.

[RishiRajSahu]

Closing as pushed to dev . fyi @vikasrohit @rmjmccormick