React Interview Questions

Code splitting is a technique used to split your application code into smaller chunks, which can be loaded on demand. This helps improve the performance of your React application by reducing the initial load time, as only the necessary code for the initial view is loaded first. Subsequent code chunks are loaded dynamically when required, often as users navigate through different parts of the application.

Why Use Code Splitting?

1. Performance Improvement: By loading only the necessary code initially, the application starts faster, providing a better user experience.
2. Optimized Resource Usage: It reduces the amount of JavaScript loaded and parsed by the browser initially.
3. Scalability: As applications grow, managing performance through code splitting becomes essential to keep load times reasonable.

How to Implement Code Splitting in React

React provides built-in support for code splitting through dynamic import() and the React.lazy and Suspense APIs.

1. Dynamic import()

You can use the import() function to dynamically import modules. This returns a promise that resolves to the module. This is the foundation of code splitting.

Example:

// Without code splitting
import HeavyComponent from './HeavyComponent';

function App() {
  return (
    <div>
      <HeavyComponent />
    </div>
  );
}

export default App;

// With code splitting
import React, { useState, useEffect } from 'react';

function App() {
  const [HeavyComponent, setHeavyComponent] = useState(null);

  useEffect(() => {
    import('./HeavyComponent').then((module) => {
      setHeavyComponent(() => module.default);
    });
  }, []);

  return (
    <div>
      {HeavyComponent ? <HeavyComponent /> : <div>Loading...</div>}
    </div>
  );
}

export default App;

2. React.lazy and Suspense

The React.lazy function lets you render a dynamic import as a regular component. Combined with Suspense, it provides a straightforward way to handle code splitting.

Example:

// App.js
import React, { Suspense, lazy } from 'react';

// Lazy load the component
const HeavyComponent = lazy(() => import('./HeavyComponent'));

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

export default App;

Explanation:

1. React.lazy:

   • const HeavyComponent = lazy(() => import('./HeavyComponent'));
   • This dynamically imports the HeavyComponent when it is rendered for the first time.

2. Suspense:

   • Suspense provides a fallback UI (e.g., a loading spinner) while the lazy-loaded component is being loaded.
   • <Suspense fallback={<div>Loading...</div>}> ensures that a loading message is displayed until HeavyComponent is fully loaded.

Code Splitting with React Router

You can also apply code splitting to routes using React.lazy and Suspense with React Router.

Example:

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Lazy load route components
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Explanation:

1. Lazy Loading Routes:

   • Each route component (Home, About, Contact) is lazily loaded using React.lazy.

2. Suspense for Route Components:

   • Suspense wraps the Switch component to provide a fallback UI while any of the route components are being loaded.

Tools for Code Splitting

While React provides the fundamental APIs for code splitting, you can use additional tools and libraries to manage and optimize the process further:

1. Webpack:

   • Webpack supports code splitting natively and can split code into separate bundles using dynamic imports and configuration options like SplitChunksPlugin.

2. React Loadable:

   • Although React.lazy and Suspense are preferred for simplicity, react-loadable is an older library that offers more customization and control over code splitting.

Conclusion

Code splitting is an essential technique for optimizing the performance of React applications. By splitting your code into smaller chunks and loading them on demand, you can improve the initial load time, reduce resource usage, and provide a better user experience. Utilizing React.lazy and Suspense, along with tools like Webpack, makes implementing code splitting in React straightforward and effective.