1. Single Responsibility Principle & Modularity Principle

The SRP is a fundamental design principle in software development that states that a class, module, or function should have one and only one reason to change. In other words, it should have only one responsibility or job. This makes the code easier to maintain, test, and extend. A class that handles both user authentication and data validation violates SRP. These two tasks should be separated into different classes.

Modularity involves dividing a system into distinct modules, where each module is responsible for a specific aspect of the system’s functionality. The goal is to create components that can be independently developed, tested, and maintained. In a web application, separating UI components, business logic, and data access into different modules promotes modularity.

2. Create a Custom Hook

A custom hook in React is a reusable function that allows you to encapsulate logic that can be shared across multiple components. It typically uses existing React hooks like useState, useEffect, etc., to handle stateful logic in a clean and reusable way.

Example: A custom hook to fetch data.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

export default useFetch;

3. When to Create a Custom Hook

You should create a custom hook when you find yourself repeating the same logic in multiple components. By extracting this logic into a custom hook, you can reuse it, making your code cleaner and more maintainable. For example, Repeated data fetching logic across components can be encapsulated in a custom hook.

4. What is Chunking / Dynamic Bundling / Code Splitting

  • Chunking: Splitting the code into chunks.
  • Dynamic Bundling: Creating bundles that are loaded dynamically based on the user’s interaction.
  • Code Splitting: The process of dividing the codebase into separate bundles that can be loaded independently.

5. Why Do We Need Code Splitting?

Code splitting is essential for optimizing the performance of web applications. As applications grow, the bundle size increases, leading to longer load times. Code splitting ensures that only the necessary code is loaded initially, reducing the initial load time and improving the user experience.

6. How to Make Bundles (Lazy Loading)

In React, lazy loading is implemented using React.lazy to dynamically import components and Suspense to display a fallback while the component is loading. This technique helps in reducing the initial bundle size by loading components only when they are needed.

Example:

import React, { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./MyComponent"));

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

export default App;

7. Lazy Loading / On-Demand Loading

Lazy loading is a design pattern in web development where content is loaded only when it’s needed. This technique improves performance by reducing the amount of data that needs to be loaded upfront. For example, Loading images or components only when they come into the viewport.