Lazy load util function in React

Question

I want to run a JS function from a module that loaded asynchronously (that exposed by module federation) and to use the return value in a React component.

For example, setting the visibility of some element by the value of a function that returns a boolean value.

All of the examples that I found, explain how to lazy load React components

Thanks! Shlomi

Show what has already been done. lazy load only for react components, not for funcions — Daniil Loban, Dec 28 '20 at 18:58

score 2 · Answer 1 · answered Feb 21 '21 at 02:07

If you only need to run the function once when the component first loads, you can simply do so using, for example a useEffect() hook and then set some state. For example

function MyComponent(){
   const [someValue, setSomeValue] = useState()
   useEffect( () => {
     import('someRemote/module').then( module => {
        const valueFromFunction = module.myFunction()
        setSomeValue(valueFromFunction)
     })
   })
   return someValue != undefined ? <div>The value is {someValue}</div> : <></>
}

Lazy load util function in React

1 Answers1