Interview Cheat Sheet: App Performance in React Native

Special Article: Interview Cheat Sheet

This cheat sheet is designed to help you quickly answer interview questions and prepare for presentations on optimizing app performance in React Native. It covers the need for performance optimization, detailed app-level and code-level strategies, what React Native offers out of the box, and common mistakes to avoid.

---

Why Focus on App Performance in React Native?

• User Experience
• Engagement & Retention
• Resource Efficiency
• Competitive Advantage

---

What this cheat sheet covers:

• App-Level Optimizations: Strategies that affect the overall app architecture and resource management.
• Code-Level Optimizations: Best practices in coding to reduce unnecessary computations and improve rendering.
• React Native Features: Built-in tools and libraries that enhance performance.

---

App-Level Optimizations

• Efficient Asset Management:

  • Use appropriately sized images and leverage caching tools.
  • SVGs & CDN: Utilize SVGs for vector images and host images on a CDN to reduce bundle size.
  • Implement lazy loading to defer non-critical assets until needed.

• Network Optimizations:

  • Request Batching: Combine multiple network requests into one.
  • Use caching strategies to reduce redundant calls.

• Optimized Build Configuration:

  • Code Splitting: Load only the necessary code chunks.
  • Tree Shaking: Remove unused code with modern bundlers.
  • Minification & Obfuscation: Use production builds to reduce size and improve load times.

• Profiling & Monitoring:

  • Integrate tools like Flipper to monitor performance.
  • Employ error tracking services (e.g., Sentry) to catch runtime issues early.

---

Code-Level Optimizations

• Optimizing Rendering:

  • Avoid Unnecessary Renders: Use React.memo, PureComponent, and control re-renders.
  • Leverage useMemo and useCallback to memoize values and functions.

• Avoid Inline Functions & Objects:

  • Define functions and objects outside of render or memoize them to prevent re-creation on each render.

• Efficient State Management:

  • Keep state localized when possible.
  • Use immutable updates to make re-render decisions more efficient.

• Optimizing Animations:

  • Always set useNativeDriver: true to offload animation work to native code.
  • This is transfer the heavy animation operations from JS to Native side (Android/iOS)

• Avoid Expensive Computations in Render:

  • Precompute heavy values outside the render cycle.
  • Reuse the heavy computed values instead of calculating them every single time.

• Virtualization:

  • Use FlatList, SectionList, or VirtualizedList to render large datasets efficiently.
  • Avoid using ScrollView when rendering homogeneous large data and instead leverage the Virtualization.

• Effective use of useEffect:

  • Manage side effects properly. For example, fetch data on component mount:
  • Verify the dependency array is correct to avoid unnecessary trigger of useEffects.
  • There is no thumb rule, but try to avoid using too many useEffects in a single component.

• Error Boundaries:

  • Implement error boundaries to catch and handle runtime errors gracefully.
  • This improves the User Experience (UX) as app doesn't crashes for runtime errors.

• Leveraging Async Operations:

  • Use asynchronous functions (async/await) to offload heavy computations and avoid blocking the main thread.

• Advanced Network Optimizations:

  • Implement request batching, pagination, and caching responses at the code level to reduce data load and improve performance.

---

What React Native Provides for a Performant App (Brief)

• Hermes JavaScript Engine: Improves start-up time and reduces memory usage.
• Native Driver for Animations: Offloads animations to native code.
• Flipper Integration: Provides insights into network calls, layout performance, and more.
• Fast Refresh: Enhances developer experience by retaining component state during updates.
• Bridging Architecture: Efficient communication between JavaScript and native modules. (part of Old Architecture)
• Optimized UI Components: Components like FlatList, SectionList, and VirtualizedList are designed for high performance.
• Over-the-Air Updates: Use tools like CodePush to deliver performance improvements without a full app update.

---

Pro-tip:
Leveraging tools like SonarQube, ESLint, and Prettier

Using these tools can significantly improve code quality while writing it. These tools help enforce best practices, catch potential bugs early, and ensure consistency in the codebase.

Integrating them into your development workflow enables real-time feedback, reducing technical debt and improving maintainability.

---

Closing Comments

This cheat sheet serves as a handy reference to quickly recall essential strategies and best practices when discussing or implementing performance optimizations in React Native. Use it to prepare for interviews, technical discussions, or presentations, and ensure you cover both high-level concepts and practical code-level techniques.

---

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow for regular update of such good articles. 🔗

Happy interviewing and coding!

Rushi Patel, Signing Off! 😊