Challenges of building React and React Native apps

Our React app faced slow hardware and massive datasets. We solved it with strategic caching, virtualization, and code splitting—see how.

#1about 2 minutes

Why React developers naturally transition to React Native

React Native is a natural choice for web developers due to shared concepts like components, JSX, and state management, despite its unique challenges.

#2about 2 minutes

Using caching to manage slow network device responses

Caching with Apollo Client can significantly improve performance by reducing the number of slow requests to delicate hardware like home routers.

#3about 1 minute

Rendering large lists efficiently with virtualization

Use virtualization or windowing with libraries like React Window and FlatList to render only the visible subset of data, preventing performance issues.

#4about 3 minutes

Reducing bundle size by replacing heavy dependencies

Improve performance metrics by replacing large libraries like React Select and Lodash with lighter alternatives or native JavaScript methods.

#5about 2 minutes

Implementing code splitting for on-demand loading

Use React.lazy and Suspense to split code into smaller chunks that can be loaded on demand, such as for specific routes or user interactions.

#6about 1 minute

Improving navigation speed with prefetching and preloading

Leverage Webpack's inline directives to prefetch or preload resources that a user is likely to need, loading them from the HTTP cache for faster access.

#7about 3 minutes

Managing offline states and network connectivity issues

Handle poor or no internet connectivity gracefully by using the react-native-netinfo package to inform users and prevent the app from entering an inconsistent state.

#8about 2 minutes

Strategies for upgrading your React Native version

Upgrade your React Native project using either the built-in CLI upgrade command or the web-based Upgrade Helper tool to see a diff of all changes.

#9about 2 minutes

Essential tools for debugging and testing applications

Use Flipper to visualize and inspect your app's network traffic and logs, and employ Jest with React Native Testing Library for robust testing.

#10about 3 minutes

Audience Q&A on performance, windowing, and tooling

The speakers answer audience questions about using Suspense in native apps, handling slow-rendering items with windowing, and analyzing package performance.