React Native performance optimization using Render Locks

At Synaptic, we track thousands of signals across hundreds of metrics that gauge the performance of millions of companies in our database. While designing Inbox, a structured feed of such signals, one of the primary objectives was to make it easy for our users to make sense of a company’s performance. Hence, instead of going with a traditional feed of isolated signals, we decided to group them together at the company level. The result was a beautiful feed, but a fairly challenging one from an engineering perspective. Take a look, for example, at OpenAI’s card: <img alt="" src="https://miro.medium.com/v2/resize:fit:700/1*-3M0XKPNpaK8BpGuOsliTQ.png" style="height:955px; width:700px" /> This card has 6 different charts (two hidden horizontally in the first row), each having its own trends, anomalies, and milestones. The Glassdoor signal itself can have up to 15 reviews. The feed has several other types of signals, each having its own complexities and rendering logic. <a href="https://engineering.synaptic.com/react-native-performance-optimization-using-render-locks-b19ea55f0796">Click Here</a>