SShortSingh.
Back to feed

Subito cuts React dropdown load time from 1,256ms to 96ms using virtualization

0
·2 views

Subito's engineering team identified a severe performance bottleneck in their marketplace's Brand filter dropdown, which listed around 1,175 options. On mobile devices with throttled CPUs, opening the dropdown triggered an Interaction to Next Paint (INP) score of 1,256ms — well below Google's 200ms threshold for a 'good' rating. The root cause was React simultaneously mounting over 1,175 component instances the moment the menu opened, creating a large synchronous rendering block. The team resolved this by implementing list virtualization, a technique that renders only the rows currently visible on screen rather than the entire dataset. This targeted fix brought the INP down to 96ms without requiring a full rewrite or heavy third-party libraries.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingDEV Community ·

How to Build a Mental Health AI Agent: Key Features, Compliance, and Costs

Advances in large language models and natural language processing now allow developers to build AI agents capable of handling complex mental health support workflows, going well beyond basic chatbots. Unlike general-purpose bots, mental health AI agents must manage sensitive personal data, detect emotional distress, and operate under strict safety and compliance requirements. Core features include natural language understanding, sentiment and emotion detection, personalized interactions, and crisis escalation protocols that connect users to human support when needed. Developers are cautioned that such systems should never act as autonomous therapists or make clinical decisions without professional oversight. Understanding the technical architecture, regulatory requirements, and real-world development costs is considered an essential starting point for any team planning to build in this space.

0
ProgrammingDEV Community ·

Crisp, Help Scout, Chatwoot: How pricing models diverge as support teams grow

A detailed cost comparison of three customer support platforms — Crisp, Help Scout, and Chatwoot — reveals that pricing architecture matters more than headline rates. Crisp uses flat-fee tiers with included agent slots, meaning teams of 3 or 8 can pay the same $95 per month on the Essentials plan. Help Scout charges per seat at $25 per user per month, making every new hire an added recurring cost. Chatwoot offers both a per-agent cloud plan and a self-hosted Community edition that costs nothing per seat, requiring only infrastructure spend of around $48 per month on a basic VPS. At 15 agents, monthly costs range from roughly $48 for self-hosted Chatwoot to $375 for Help Scout Standard, illustrating how the choice of pricing model compounds significantly with team growth.

0
ProgrammingDEV Community ·

Release Notes Are an Underused Learning Resource, Argues Developer

Software developer Asael Shinder argues that release notes are among the most valuable yet overlooked learning tools available to engineers. Written by the people who know a system best, they document real design mistakes, security failures, and corrected decisions in precise language. Unlike tutorials, which present ideal workflows at a fixed point in time, release notes reveal how a tool evolves and where its boundaries lie. Shinder recommends subscribing to releases for three or four core dependencies and spending just 15 minutes a month reading them, focusing on breaking changes and deprecations. He suggests tracing a single surprising item back to its original issue or pull request, where the underlying technical debate often teaches more than formal documentation.

0
ProgrammingDEV Community ·

Unix Timestamps Explained: How Epoch Time Works and How to Convert It

A Unix timestamp is a numeric value representing the number of seconds elapsed since January 1, 1970 at 00:00:00 UTC, known as the Unix epoch. Developers widely use Unix timestamps in APIs, databases, logs, and authentication systems because they are simple to store, compare, and transmit across platforms. One of the most frequent mistakes is confusing second-based timestamps with millisecond-based ones, which can cause applications to display completely incorrect dates. JavaScript, Python, and Linux each offer built-in methods to retrieve and convert Unix timestamps — such as Date.now() in JavaScript, the time module in Python, and the date +%s command on Linux. When working with any system that uses timestamps, it is important to verify whether the expected unit is seconds, milliseconds, or another format, and to document this clearly.