feat(runtime): add viewport prefetch behavior to PrefetchLink#8753
feat(runtime): add viewport prefetch behavior to PrefetchLink#8753BleedingDev wants to merge 2 commits into
Conversation
✅ Deploy Preview for modernjs-byted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: 0bdba63 The changes in this PR will be included in the next version bump. This PR includes changesets to release 117 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 545ddbe82e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| usePrefetchBehavior(prefetch, props); | ||
| const setAnchorRef = React.useCallback( | ||
| (element: HTMLAnchorElement | null) => { | ||
| setViewportElement(element); |
There was a problem hiding this comment.
Because setAnchorRef is installed on every Link/NavLink, this state update runs on mount even for the default prefetch="none" and for intent/render links where viewportElement is never used. Each link schedules an extra render just to store its DOM node, so pages with large navs or link lists pay this overhead without enabling viewport prefetch; only update this state when prefetch === 'viewport'.
Useful? React with 👍 / 👎.
| const setAnchorRef = React.useCallback( | ||
| (element: HTMLAnchorElement | null) => { | ||
| setViewportElement(element); | ||
| setRef(forwardedRef, element); |
There was a problem hiding this comment.
When a React 19 consumer passes a callback ref that returns a cleanup function, this wrapper calls it via setRef but drops the return value, so React only sees setAnchorRef returning undefined and never runs the consumer's cleanup. This regresses refs that worked when forwardedRef was passed directly; have the composed ref return or otherwise invoke the callback ref's cleanup.
Useful? React with 👍 / 👎.
1 participant
Problem
PrefetchLinksupportsintent,render, andnone, but cannot defer prefetching until a link is near the viewport. That makes long lists of links choose between prefetching too early or waiting for user interaction. Route chunk preloads were also tied to render-time work, which made viewport-triggered prefetch harder to model cleanly.Fix
Add
prefetch="viewport"forLinkandNavLinkusingIntersectionObserverwith a viewport margin. Route chunks now preload from the prefetch link effect while existing data prefetch links still use the SSR data path.Test
Added a router runtime unit test for viewport-triggered prefetch. Ran install, scoped runtime build, and scoped runtime tests.
🤖 Generated with Claude Code