Loading React hooks using dynamic imports?

As you say it, there are two ways to go about using lazy loaded hooks:

1. Load library in a Parent Component, conditionally render Component using library when available

Something along the lines of

let lib
const loadLib = () => {...}

const Component = () => {
  const {...hooks} = lib
  ...
}

const Parent = () => {
  const [loaded, setLoaded] = useState(false)
  useEffect(() => loadComponent().then(() => setLoaded(true)), [])
  return loaded && <Component/>
}

This method is indeed a little hacky and a lot of manual work for each library

2. Start loading a component using the hook, fail, reconstruct the component when the hook is loaded

This can be streamlined with the help of React.Suspense

<Suspense fallback={"Loading..."}>
  <ComponentWithLazyHook/>
</Suspense>

Suspense works similar to Error Boundary like follows:

1. Component throws a Promise during rendering (via React.lazy or manually)
2. Suspense catches that Promise and renders Fallback
3. Promise resolves
4. Suspense re-renders the component

This way is likely to get more popular when Suspense for Data Fetching matures from experimental phase.

But for our purposes of loading a library once, and likely caching the result, a simple implementation of data fetching can do the trick

const cache = {}
const errorsCache = {}
// <Suspense> catches the thrown promise
// and rerenders children when promise resolves
export const useSuspense = (importPromise, cacheKey) => {
  const cachedModule = cache[cacheKey]
  // already loaded previously
  if (cachedModule) return cachedModule

  //prevents import() loop on failed imports
  if (errorsCache[cacheKey]) throw errorsCache[cacheKey]

  // gets caught by Suspense
  throw importPromise
    .then((mod) => (cache[cacheKey] = mod))
    .catch((err) => {
      errorsCache[cacheKey] = err
    })
};

const SuspendedComp = () => {
  const { useForm } = useSuspense(import("react-hook-form"), "react-hook-form")
  const { register, handleSubmit, watch, errors } = useForm()
  ...
}

...

<Suspense fallback={null}>
  <SuspendedComp/>
</Suspense>

You can see a sample implementation here.

Edit:

As I was writing the example in codesandbox, it completely escaped me that dependency resolution will behave differently than locally in webpack.

Webpack import() can't handle completely dynamic paths like import(importPath). It must have import('react-hook-form') somewhere statically, to create a chunk at build time.

So we must write import('react-hook-form') ourselves and also provide the importPath = 'react-hook-form' to use as a cache key.

I updated the codesanbox example to one that works with webpack, the old example, which won't work locally, can be found here