Skip to main content

E9 - Optimizing our App

Performance matters, and in this episode, you'll explore optimization techniques. Discover how to make your app faster, more efficient, and provide a smoother user experience.

Reference links from pdf notes & assignments​

  • test
  • test

key points​

  • Make sure maintain Single Responsibility Principle (SRP) in each components of complete react projects, meaning each components should do one thing, and do it well, this helps keep components clean, reusable, and easy to test and maintain.
  • If a single component is handling multiple responsibilities or tasks, refactor it by splitting those tasks into separate components. This ensures each component adheres to the Single Responsibility Principle (SRP). So that maintain code in modular fashion
  • Modular Design: Organize your codebase by dividing it into small, logical modules. This enhances maintainability and testability, making your application easier to manage and scale. Modular design also simplifies debugging, as issues can be isolated and resolved more efficiently during unit testing.
  • By adhering to Modular Design and the Single Responsibility Principle (SRP) in your projects, you gain several advantages:
    • Reusability: Components can be easily reused across different parts of your application.
    • Maintainability: Code is easier to update, refactor, and debug.
    • Testability: Smaller, focused components are simpler to test in isolation.
  • Hooks are normal javascript utility functions, we can create our own custom hooks as well by following Modular Design & SRP
  • Create a Custom hooks, where ever possible & follow Modular Design & SRP
  • React recommends while creating custom hooks function utils, start with use like useOnlineStatus
  • Add ESlint rules of react best practices
  • Web apps performance techniques
    • JavaScript Bundling
      • Split large JavaScript bundles into multiple smaller bundles (code splitting). This allows the app to load only the necessary code for each page or feature, improving initial load times and overall performance.
    • Chunking / Code splitting / Lazy loading / Dynamic bundling / On demand loading / Lazy loading / Dynamic import
    • Logical chunking based on features
    • https://react.dev/reference/react/lazy

Assignments - Q & A​

1.sada

2.asda

Stopped at 1hr 0min