Your React App Is Slow. It’s Probably Not React.

When a React app is slow, the cause is usually behind it: slow API calls, heavy data, large images or work that should run in the background. Cercle, a UK fashion rental marketplace on React and Next.js, had slow pages that hurt engagement and sales. Most of our fixes were behind the front end, alongside some React changes.

1. 01What we fixed on Cercle

   Cercle lets people rent clothes, shoes and accessories from lenders. Slow loads frustrated users, raised bounce rates and cut engagement and sales.

   1. Product data. We optimized how product data was handled, so pages got what they needed faster.

   2. Image caching. Photos are the heaviest part of a fashion site, so we served them through a CDN that caches them close to each shopper.

   3. Background jobs. We moved heavy work to Sidekiq, a background job system for Ruby, so the interface stays responsive while it runs.

   Faster pages cut bounce rates and supported higher sales.

2. 02Why rewriting components rarely helps

   A component rewrite changes how a page draws. If the page is waiting on a slow API, it will wait just as long after the rewrite. That is why our engineers check the API and the database before touching React code.

   The same applies to any framework. On AutoBuffy, an Angular store, part search was slow because of very large database tables. Caching alone didn’t help, so we added Elasticsearch, refined the database structure and added indexes.

3. 03What to check first

   1. Open the browser’s network panel and reload. Note the slowest requests, and how long the page waits for its first data.

   2. Check the size of API responses. Sending whole records when the page shows three fields slows every request.

   3. Look at the database queries behind the slowest endpoint. Missing indexes and one query per item in a list are common causes.

   4. Check image sizes and caching headers. Serve images at the size they display, in a modern format.

   5. Move slow work, such as emails, exports and syncs, to background jobs.

   6. Then profile React itself with React DevTools, looking for components that re-render without need.

4. 04When React is the problem

   Sometimes it is. Huge lists rendered at once, state that redraws the whole page on every keystroke, and very large JavaScript bundles all slow the front end. The usual fixes are list virtualization, keeping state close to where it’s used and splitting code by route.

   Measure first anyway. Finding the slow layer takes far less time than rewriting the wrong one.