Research on performance

[prastut]

Since we deal with live elements and the entire UX hinges around how fast we render elements when they happened, we need to deeply care about performance.

Some off the mind questions I want answers to:

• What is paint time and how best do we reduce the time the browser paints the interface -> to reactivity? Need to read more into how gatsby.js came up: https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/

• Optimizing React components by optimizing componenentDidUpdate lifecycle. The more functional the components, the less they would update, the better we can optimize our codebase by returning false from the componentDidUpdate lifecycle.

This not a high priority issue but investigative work on how we would proceed will be really helpful.

The goal is there should be no jank on the website/app and the UX should be as buttery and smooth. Speed is one of the many things that lead to anxiety, confusion and irritation.

[prastut]

Notes on optimizing components tying to the overall arc of optimizing performance:

• <TwitterUser>

  • Should only render once and should not update itself.
  • Remove image exists logic -> should become stateless dumb component.

• <TrendingEntities>

  • emoji prop should become a slot for Emoji component. Major bottleneck will get removed here.
  • Remove all slicing and sorting logic for trending entities-> should become stateless dumb component.

• <TopicCard>:

  • Has to undergo massive refactor. Currently is tightly couped with <SentimentBar> and <Emoji> components. It should only care about displaying a Topic Card based on variant.
  • Most of the UI logic is repeated twice for the two variants. Ideally become unity.

• <EventsTimeline>

  • swiper component has to be decoupled from the events timeline.
  • event should become a stateless dumb component