React lazy load for a function, not a component

Question

I am working on a React v16 app and need to load a heavy (IMO) library for xlsx export of data.

I'm using functional components/hooks.

I understand and have used the <Suspense /> component and lazy for lazy loading modules. but since this item is not a component, it is simply a library function i need to run with an onClick event, i can't use lazy/suspense.

How can i lazy load this function only when needed? (writeXlsxFile)

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
//...
import writeXlsxFile from "write-excel-file";

//...
  const fileCreate = async () => {
    await writeXlsxFile(exportData, {
      schema,
      fileName: `file.xlsx`,
    });
  };

return(//...

Can you clarify what you mean by "this function"? Do you mean fileCreate or writeXlsxFile? — Urmzd
– Urmzd, Commented Nov 10, 2021 at 15:31
i just updated it cuz i was thinking the same thing, kinda vague. the writeXlsxFile function is what i want to lazy load — sao
– sao, Commented Nov 10, 2021 at 15:32
but if i import at the top of file, its not lazy loading. i need it to selectively load only when needed, aka, when the user needs to use it — sao
– sao, Commented Nov 10, 2021 at 15:36
In any case, named imports can be lazy loaded by way of async. Ex: async () => { const writeXlsxFile = await import ('write-excel-file'), // Whatever you want here} — Urmzd
– Urmzd, Commented Nov 10, 2021 at 15:38
does this stackoverflow.com/a/64208216/5690068 answer your question? dynamic import will work, you just need to access it by module.default — seanplwong
– seanplwong, Commented Nov 10, 2021 at 16:08

Urmzd · Accepted Answer · 2022-11-25 23:04:16Z

4

JavaScript, and by direct association, React, supports Dynamic Imports.

So,

const fileCreate = async () => { 
  const {default: writeXlsxFile} = await import ('write-excel-file')
  void await writeXlsxFile(exportData, {
      schema,
      fileName: `file.xlsx`,
  });
}

edited Nov 25, 2022 at 23:04

answered Nov 10, 2021 at 15:42

Urmzd

7135 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sao Over a year ago

bummer im getting a "writeXlsxFile" is not a function error, i did update the names to match, you had writeXlsx, which is updated to writeXlsxFile

Urmzd Over a year ago

@sao you're still getting the error after updating the names?

sao Over a year ago

yeah its still there

Urmzd Over a year ago

Updated @sao. It passed my mind that you're using a default import instead of a named import (even though default imports can be imported by name).

sao Over a year ago

you got it dude. the second rendition works. i'll have to read up on the default setting. thank you!

Collectives™ on Stack Overflow

React lazy load for a function, not a component

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related