📱 Optimizing React Apps for Mobile Performance: A Practical Guide

Aamna Majid — Wed, 06 Aug 2025 06:57:40 +0000

Mobile users expect fast, smooth experiences — but React apps can sometimes struggle on slower devices and networks. In this article, I’ll share practical tips and techniques to optimize your React app for better mobile performance without sacrificing functionality.

1. Why Mobile Performance Matters

Mobile devices generally have less powerful CPUs, limited memory, and slower network connections compared to desktops. According to Google, 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Poor mobile performance means frustrated users, lower engagement, and ultimately lost revenue.

React apps, with their heavy JavaScript bundles and dynamic rendering, can sometimes exacerbate these issues. Optimizing React apps for mobile is critical to reach and retain your audience effectively.

2. Measure First: Use Performance Analysis Tools

Before optimizing, it’s essential to understand where your app spends most time and resources. Use these tools to profile your React app’s performance:

Google Lighthouse: Built into Chrome DevTools, Lighthouse provides audits on performance, accessibility, SEO, and best practices. It also simulates slow network and CPU conditions.
React DevTools Profiler: Allows you to record interactions and identify components causing slow renders or unnecessary re-renders.
WebPageTest.org: Test your site’s performance on real devices and under various network throttling settings.

Optimization is an iterative process: Measure → Identify bottlenecks → Apply fixes → Measure again.

3. Code Splitting and Lazy Loading

Shipping all JavaScript in one bundle makes your app slow to load, especially on mobile networks. Code splitting breaks your app into smaller chunks loaded on demand.

How to implement:

Use dynamic import() syntax to split code.
Wrap lazy-loaded components in React’s React.lazy and Suspense.
For routing, frameworks like Next.js automatically split code by pages.

Example of lazy loading a dashboard component:

import React, { Suspense } from "react";

const Dashboard = React.lazy(() => import("./Dashboard"));

function App() {
  return (
    <Suspense fallback={<div>Loading dashboard...</div>}>
      <Dashboard />
    </Suspense>
  );
}

4. Optimize Images and Media

Images are often the largest assets on a page. Optimizing them is key to improving mobile performance.

Use responsive images with the srcset and sizes attributes to serve appropriately sized images for different screen sizes.
Convert images to modern formats like WebP or AVIF, which offer better compression than JPEG or PNG.
Implement lazy loading of images to defer loading until they enter the viewport. This can be done with the native loading="lazy" attribute or via the Intersection Observer API.

Example:

<img
  src="small.jpg"
  srcSet="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 768px"
  alt="Product screenshot"
  loading="lazy"
/>

5. Minimize JavaScript and Bundle Size

Large JS bundles = longer downloads and slower runtime.

Tips:

Tree shaking: Use Webpack/Vite to remove unused code
Replace heavy libraries (e.g., moment.js ➝ date-fns)
Analyze bundles with Webpack Bundle Analyzer
Use code splitting for libraries and pages

6. Avoid Expensive Re-renders

Unnecessary renders kill performance, especially on mobile.

Best Practices:

Use React.memo to avoid unnecessary component re-renders
Use useCallback and useMemo to memoize functions and values
Always use stable and unique key props in lists
Avoid inline object/function definitions inside JSX

Example:

const ListItem = React.memo(({ item, onClick }) => {
  console.log("Rendering:", item.id);
  return <li onClick={() => onClick(item.id)}>{item.name}</li>;
});

7. Efficient State Management

Inefficient state can trigger expensive rerenders.
Keep state local with useState unless it must be shared
Don’t overuse global state (use Redux/Zustand only if needed)
Prefer lightweight state managers for simple apps
Batch state updates to minimize re-renders

8. Optimize CSS and Styling

CSS can block page rendering.
Inline critical CSS for first paint
Use CSS Modules or Tailwind CSS for scoped, minimal styles
Avoid large UI frameworks if you're not using most of their styles
Use tools like PurgeCSS to remove unused styles

9. Use Service Workers and Caching

Make repeat visits faster and more reliable.
Cache static assets (JS, CSS, images)
Cache API responses where appropriate
Use Workbox for simplified service worker setup
Be careful with stale data — implement cache invalidation

10. Test on Real Devices and Networks

Don’t rely only on emulators.
Test on real phones with different screen sizes and performance levels
Simulate slow 3G/4G networks using DevTools throttling
Watch for layout shifts, long input delays, memory issues

✅ Final Thoughts
Optimizing React apps for mobile isn't just about trimming code — it's about being thoughtful with every decision that affects performance, from routing to rendering to styling.

By following these practices, you'll build faster, more accessible, and user-friendly mobile experiences.

Why We Migrated from PHP to Next.js: Lessons from a Real-World Fintech App

Aamna Majid — Wed, 30 Jul 2025 07:10:55 +0000

When I joined the engineering team at my current company, I was brought in to help modernize a large financial web application. The system had been originally built using PHP, and while it functioned well enough for a time, it had become increasingly difficult to maintain and scale—especially on the frontend.

The team had already made the decision to transition to a modern stack: React, Next.js, TypeScript, and Tailwind CSS. My role was to help implement that new frontend, contribute to component design, and support a smooth migration path. In this article, I’ll share why this move made sense, how we approached the migration, and what lessons we learned along the way.

⚠️ Why We Moved Away from PHP

The original system followed a monolithic PHP architecture. The frontend and backend were tightly coupled, making even simple UI changes cumbersome and risky. Any small update—say, a button or form layout—often required backend adjustments, increasing the chance of regression bugs.

Challenges included:

Poor component reusability
Inline, inconsistent styling
Slow performance on data-heavy pages
Difficult developer onboarding
Lack of mobile responsiveness and SEO control

⚙️ Why We Chose Next.js and TypeScript

We selected Next.js because it offered the best mix of server-side rendering, performance, and developer experience. It gave us the flexibility to build dynamic pages while still maintaining good SEO—essential for dashboards and user-facing views.

We used:

Next.js for routing and SSR
TypeScript for safer, more maintainable code
Tailwind CSS for consistent, scalable UI

This modern stack allowed us to build faster and more reliably while reducing bugs and developer ramp-up time.

Related links: TypeScript, Tailwind CSS

🔁 Our Migration Strategy

Since the PHP system was still active, we chose incremental migration. We:

Identified high-priority views (like dashboards)
Rebuilt them in Next.js
Connected to the existing backend via REST APIs
Handled authentication/session logic carefully
Gradually routed users to the new frontend via feature toggles

This avoided a risky "big bang" rewrite and allowed us to learn and iterate safely.

💡 Lessons Learned

Throughout the migration, a few lessons stood out:

🔍 Don’t migrate everything at once—focus on high-impact features first.
🧱 Build shared components early to avoid duplication.
🧪 Test with real users—especially in fintech where UI expectations are high.
🛠 Maintain tight team feedback loops and documentation.

✅ Final Thoughts

Modernizing a legacy app isn’t easy, but the long-term benefits are worth it. Migrating from PHP to Next.js improved performance, UX, and developer speed across the board.

If you’re working on a similar migration, start small, be strategic, and use tools that align with your team’s strengths.

Thanks for reading! If you’ve gone through a frontend migration—or are planning one—I’d love to hear what worked for you in the comments 👇

About the author

Aamna Majid is a senior frontend engineer with 4+ years of experience building modern web applications using React, Next.js, TypeScript, and Tailwind CSS. She’s passionate about clean UI architecture, performance optimization, and helping teams modernize legacy systems.

📬 Connect with her on LinkedIn

Forem: Aamna Majid