react hook for lazy load and code-split react components or whatever you want.
npm install uselazyreact hook for lazy load and code-split react components or whatever you want.
NOTE: useLazy now handles both dynamic and named imports.
  !Eclipse Marketplace !GitHub last commit !GitHub commit activity !GitHub issues
``
npm install uselazy
or
`
yarn add uselazy
`typescriptuseMemo
// This it whats takes useLazy:
useLazy
// array of functions that returns a promise from a dynamic import which
// could be an object with a default import or named import
// NOTE: please you should wrap this value inside of
importFns: Array<() => Promise<{ default: T } | { [K: string]: T }>>,
// this is were you decided when to execute the import
shouldImport: boolean
);
`jsx
// Text.tsx
import React from 'react';
const Text = () =>
Here's your beer
;export default Text;
// App.tsx
import React, { useState, useMemo } from 'react';
import useLazy from 'uselazy';
const imports = [() => import('./Text')];
const App = () => {
const [shouldImport, setShouldImport] = useState(false);
const { isLoading, result } = useLazy(
// Preserves identity of "imports" so it can be safely add as a dependency of useEffect
// inside useLazy
useMemo(() => imports, []),
shouldImport,
);
const [TextComponent] = result;
return (
{isLoading && some spinner}
{TextComponent &&
$3
jsx
// Bears.tsx
import React from 'react';export const Bears = () =>
Bears loves beers
;// App.tsx
import React, { useState, useMemo } from 'react';
import useLazy from 'uselazy';
const namedImports = [() => import('./Bears')];
const App = () => {
const [shouldImport, setShouldImport] = useState(false);
const { isLoading, result } = useLazy(
// Preserves identity of "namedImports" so it can be safely add as a dependency of useEffect
// inside useLazy
useMemo(() => namedImports, []),
shouldImport,
);
const [BearsComponent] = result;
return (
I'm very lazy
{isLoading && some spinner}
{BearsComponent &&
);
};
`$3
jsx
// Text.tsx
import React from 'react';const Text = () =>
Here's your beer
;export default Text;
// Bears.tsx
import React from 'react';
export const Bears = () =>
Bears loves beers
;// App.tsx
import React, { useState } from 'react';
import useLazy from 'uselazy';
const imports = [() => import('./Text'), () => import('./Bears')];
const App = () => {
const [shouldImport, setShouldImport] = useState(false);
const { isLoading, result: Components } = useLazy(
// Preserves identity of "imports" so it can be safely add as a dependency of useEffect
// inside useLazy
useMemo(() => imports, []),
shouldImport,
);
return (
I'm very lazy
{isLoading && some spinner}
{Components && Components.map(Component =>
);
};
`$3
jsx
// someUtils.ts
import React from 'react';const someUtils = {
byMoreBeers(cuantity: number): string {
return
${cuantity} beers on the way ;);
},
};export default someUtils;
// App.tsx
import React, { useState } from 'react';
import useLazy from 'uselazy';
const utilsImport = [() => import('./someUtils')];
const App = () => {
const [shouldImport, setShouldImport] = useState(false);
const { isLoading, result } = useLazy(
// Preserves identity of "utilsImport" so it can be safely add as a dependency of useEffect
// inside useLazy
useMemo(() => utilsImport, []),
shouldImport,
);
const [utils] = result;
return (
{isLoading && some spinner}
{utils && (
)}
);
};
`NOTE
The reason why I'm encouraging to wrap the imports array with
so I giving the developer total control of this, he decides whether the array can change.
more details here: A Complete Guide to useEffect