> Markdown version of [/videos/448-challenges-of-building-react-and-react-native-apps?t=1147](https://www.wearedevelopers.com/videos/448-challenges-of-building-react-and-react-native-apps?t=1147). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Challenges of building React and React Native apps

Bloated bundles cripple load times. Stop relying on heavy third-party dependencies. Discover advanced virtualization and caching strategies to master cross-platform React performance.

- **Speakers:** [Milica Aleksic](https://www.wearedevelopers.com/@milica-aleksic), Stefan Nikolic
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 24:10
- **URL:** https://www.wearedevelopers.com/videos/448-challenges-of-building-react-and-react-native-apps

## Summary

Building applications with React and React Native provides a cohesive development experience but can introduce complex performance and user experience challenges. This presentation explores practical strategies to maintain optimal load times and graceful application states across web and mobile platforms. The core narrative focuses on transitioning from typical performance pitfalls, such as slow hardware responses and bloated bundle sizes, to a streamlined, highly functional user interface.

To improve rendering and load speeds, developers must carefully audit third-party dependencies. Replacing heavy libraries like react-select and react-slick with lighter alternatives, and directly importing or completely removing lodash, drastically shrinks bundle sizes. Efficient data rendering is managed by utilizing virtualization tools like react-window and FlatList, ensuring large datasets remain performant. Network strain and redundant requests are minimized through robust Apollo Client caching protocols and Webpack-powered resource prefetching and preloading. Furthermore, code splitting via React.lazy and Suspense delays component loading until specific user interactions or route navigations occur, significantly improving initial application metrics.

For mobile application development, the talk details optimizing code execution with inline requires and thoughtfully managing offline states to maintain a seamless user experience, avoiding inconsistent interface states by employing the NetInfo package. Evolving the codebase is streamlined using the React Native CLI and Upgrade Helper, mitigating the typical friction associated with framework version updates. Debugging and quality assurance are ultimately anchored by dedicated inspection tools like Flipper for analyzing native logs and network patterns, functioning alongside Jest and the React Native Testing Library to ensure long-term code stability and reliability.

**Keywords:** react native performance, bundle size reduction, list virtualization, react-window library, flatlist component, apollo client caching, lodash optimization, component code splitting, react suspense, webpack prefetching, offline state management, mobile network connectivity, react native netinfo, inline requires, react native upgrade helper, flipper debugging tool, jest testing framework, react native testing library

## Chapters

1. **Transitioning developers from React web to React Native mobile** (00:05) — Similarities in foundational elements like components and state management allow developers to smoothly transition to mobile applications.
1. **Handling slow network responses with Apollo Client caching** (02:26) — Data caching reduces the number of expensive manual requests directed at delicate hardware routers.
1. **Rendering large data lists with windowing and virtualization** (05:41) — Windowing techniques improve application performance by rendering only the elements currently visible to the user.
1. **Decreasing application bundle sizes by swapping heavy dependencies** (07:02) — Replacing massive third-party libraries with lighter alternatives or native methods effectively optimizes application bundle sizes.
1. **Optimizing bundle loading with code splitting and dynamic imports** (10:08) — Techniques like lazy loading, route-based splitting, and inline requires load JavaScript chunks only when specifically requested.
1. **Preloading and prefetching resources with Webpack magic comments** (12:13) — Requesting upcoming route resources and modules prior to user interaction drastically improves perceived application load times.
1. **Managing offline mode and interrupted connections in mobile applications** (13:41) — Integrating network status packages and context providers ensures a seamless user experience during sudden connection losses.
1. **Strategies for manually upgrading React Native application versions** (17:10) — Safely resolving version conflicts relies on command line interface auto-upgrades or dedicated upgrade helper web tools.
1. **Debugging and analyzing native applications with Flipper** (19:07) — Developers leverage native Android and iOS plugin ecosystems to thoroughly inspect device logs and intercept network queries.
1. **Testing components using community libraries and Jest frameworks** (20:04) — Integrating the default test renderer or dedicated testing library modules consistently validates intended user interface behaviors.
1. **Audience questions on Suspense, windowing, and package statistics** (20:59) — Audience inquiries highlight important considerations around concurrent rendering behaviors, windowing limitations, and performance analysis toolchains.

## Related Moments

- [Architecture and performance optimizations in React Native](https://www.wearedevelopers.com/videos/1466-building-better-apps-with-react-native) (from "Building Better Apps with React Native")
- [Defining native applications and the history of React](https://www.wearedevelopers.com/videos/277-hands-on-react-native-from-zero-to-hero) (from "Hands-on React Native: From Zero to Hero")
- [Origins and architectural capabilities of the React Native framework](https://www.wearedevelopers.com/videos/556-the-perfect-ci-cd-react-native-pipeline-with-fastlane) (from "The perfect CI/CD React Native pipeline with Fastlane")
- [Transitioning to React Native from web development](https://www.wearedevelopers.com/videos/274-making-the-switch-from-web-to-mobile-development) (from "Making the switch from web to mobile development")
- [Advantages of utilizing native React state management tools](https://www.wearedevelopers.com/videos/1019-rethinking-react-state-management-the-power-of-built-in-solutions) (from "Rethinking React State Management: The Power of Built-In Solutions")
- [Navigating continuous delivery for React Native mobile applications](https://www.wearedevelopers.com/videos/556-the-perfect-ci-cd-react-native-pipeline-with-fastlane) (from "The perfect CI/CD React Native pipeline with Fastlane")

## Related Articles

- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025)
- [Dev Digest 103 - Superb Owl Trafficking](https://www.wearedevelopers.com/magazine/388-dev-digest-103-superb-owl-trafficking)

## Related Jobs

- [Senior React Native Developer](https://www.wearedevelopers.com/jobs/ext/1518176-senior-react-native-developer) at **Almedia**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**