Code splitting and lazy loading in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to lazy load a component in Remix.

Remix

import { lazy } from 'react';
const LazyComponent = lazy(() => import('./[1]'));

Drag options to blanks, or click blank then click option'

AComponent

BLazyComponent

CMyComponent

DHomePage

Attempts:

3 left

💡 Hint

Common Mistakes

Using the component variable name instead of the file name in the import path.

Forgetting to wrap the import in a function for lazy loading.

The import path should match the component file name you want to lazy load.

2fill in blank

medium

Complete the code to wrap a lazy loaded component with Suspense in Remix.

Remix

import { Suspense } from 'react';

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <[1] />
    </Suspense>
  );
}

Drag options to blanks, or click blank then click option'

ALazycomponent

BLazyComponent

ClazyComponent

Dlazycomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase component names which React treats as HTML tags.

Mismatching the component name casing.

The component name must match the imported lazy component exactly, including case.

3fill in blank

hard

Fix the error in the lazy loading import statement.

Remix

const LazyComponent = lazy(() => import([1]));

Drag options to blanks, or click blank then click option'

A./MyComponent

BMyComponent

C'MyComponent'

D'./MyComponent'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the import path.

Passing a variable name without quotes.

The import function requires a string path wrapped in quotes to correctly locate the module.

4fill in blank

hard

Fill both blanks to create a lazy loaded route component in Remix.

Remix

import { lazy } from 'react';

export const loader = async () => {
  return [1];
};

const Component = lazy(() => import('[2]'));

export default Component;

Drag options to blanks, or click blank then click option'

Anull

Bundefined

C'./Dashboard'

D'Dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Returning undefined in loader which can cause errors.

Using import path without './' prefix.

Loader returns null if no data is needed. The import path must be a string with relative path.

5fill in blank

hard

Fill all three blanks to implement lazy loading with error boundary in Remix.

Remix

import { lazy, Suspense } from 'react';
import { [1] } from '@remix-run/react';

const LazyPage = lazy(() => import('[2]'));

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <[3]>
        <LazyPage />
      </[3]>
    </Suspense>
  );
}

Drag options to blanks, or click blank then click option'

AErrorBoundary

B'./LazyPage'

DErrorBoundaryComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling ErrorBoundary or importing from wrong package.

Not wrapping lazy component with ErrorBoundary.

Use ErrorBoundary from Remix to catch errors. Import path must be string with './'. Wrap LazyPage with ErrorBoundary component.