feat: add onError and onLoad lifecycle hooks with setConfig#1037
Open
roidayan1 wants to merge 1 commit into
Open
feat: add onError and onLoad lifecycle hooks with setConfig#1037roidayan1 wants to merge 1 commit into
roidayan1 wants to merge 1 commit into
Conversation
loadable had an internal onLoad but no way for consumers to react to a
component load. This adds two symmetric, opt-in lifecycle hooks:
- `onError(error, props)` — called when a dynamic import fails. It is a
notification hook; the error is still thrown so an Error Boundary can catch
it. Recovery (reload, report, ...) is left to the consumer.
- `onLoad(result, props)` — called when a dynamic import resolves.
Both are available per-instance via `loadable(fn, { onError, onLoad })` and
globally via `loadable.setConfig({ onError, onLoad })`; a per-instance option
takes precedence over the global default. `lazy` and the `.lib` variants get
them too.
Hooks fire once per load even in suspense mode, where the render path can
attach several then/catch handlers to the same cached promise.
Docs and tests included.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Author
|
@theKashey when you have a moment, would you be open to reviewing this? It's small, additive and backward-compatible: two opt-in lifecycle hooks ( |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
loadablealready has an internalonLoad, but there is no supported way for a consumer to react to a component load — success or failure. Today a failed dynamicimport()can only be handled by an Error Boundary, and there is no success callback at all.This PR adds two small, opt-in, backward-compatible lifecycle hooks:
onError(error, props)— called when a dynamic import fails. It is a notification hook: the error is still thrown afterwards, so your Error Boundary keeps working as the last line of defense. Use it to report the failure or to recover (e.g. reload the page after a deploy invalidated the chunk hashes).onLoad(result, props)— called when a dynamic import resolves.Both can be set:
lazyand the.libvariants inherit them (samecreateLoadable).Why
Reacting to lazy-load failures is a common need (the classic "Failed to fetch dynamically imported module" after a deploy). Wrapping every
loadable()call by hand is repetitive, and there is no global entry point. A first-class hook + a globalsetConfigdefault covers both, while staying a mechanism (recovery policy is left to the consumer) — see docs for a reload-once-with-guard example.Notes
onError/onLoad→ behavior is byte-for-byte unchanged (error still thrown to the Error Boundary).then/catchhandlers to the same cached promise (deduped per instance).config.js(global store) andhooks.js(instance-over-global resolver).setConfigis also exported as a named export.Tests & docs
packages/component/src/loadable.test.js(#onError,#onLoad): args, precedence (instance over global), fires-once-in-suspense, and thatonErrorstill reaches the Error Boundary.api-loadable-component(options tables +onError/onLoad/setConfigsections) anderror-boundaries(a stale-chunk reload-once recovery example).