Repository navigation
docs: add native DOM examples to Activity guide - #101581
Merged
Merged
Conversation
Contributor
Tests PassedCommit: 450f4d1 |
github-actions
Bot
added
the
Documentation
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
aurorascharff
marked this pull request as ready for review
November 11, 2026 14:50
Contributor
|
All broken links are now fixed, thank you! |
icyJoseph
reviewed
Nov 11, 2026
| ```tsx highlight={3,7-9,20,25} | ||
| If a dialog should open when visiting a particular URL, derive its state from a search parameter. For example, this dialog opens when the URL includes `?edit=true`: | ||
|
|
||
| ```tsx highlight={7-9,15-17,28,33} |
Member
There was a problem hiding this comment.
This highlights:
return (
<Suspense fallback={null}>
<ProductDialog />
Contributor
Author
There was a problem hiding this comment.
great, i didnt reread the diff after having an agent try to build the examples. apparently it did a terrible job
icyJoseph
reviewed
Nov 11, 2026
| ``` | ||
|
|
||
| With this approach, `isDialogOpen` derives from the URL rather than component state. When navigating away and returning, the search param is cleared (the URL changed), so `isDialogOpen` becomes `false`. Opening the dialog sets the param, which changes `isDialogOpen` and triggers the Effect. | ||
| The [`Suspense` boundary](/docs/app/api-reference/functions/use-search-params#prerendering) lets the rest of the page prerender while the dialog reads the current search parameters. |
Member
There was a problem hiding this comment.
Not correct anymore-ish... we can and should refactor so that the edit product button is a sibling to the boundary.
And, idk, this is not a Page or Layout, it is a contained piece of UI, who ever renders it could take care of the Suspense boundary placement. It depends.
icyJoseph
reviewed
Nov 11, 2026
| ``` | ||
|
|
||
| This resets all fields whenever the user navigates away. | ||
| Defining the callback outside the component keeps it stable across re-renders. `form.reset()` does not reset React state. For controlled inputs, reset the state passed to `value` or `checked`, as in the examples above. |
Member
There was a problem hiding this comment.
Should we say why keep it stable? no?
icyJoseph
reviewed
Nov 11, 2026
| **When to keep it:** A sidebar with expanded sections, a FAQ accordion, or a filters panel. The user set up their view intentionally, and restoring it avoids re-doing that work. | ||
|
|
||
| **When to reset it:** A dropdown menu or popover triggered by a button click. These are transient interactions, not persistent view state. Returning to a page with a dropdown already open is not user friendly. | ||
| **When to reset it:** A dropdown menu or popover triggered by a button click, for example. These are transient interactions, not persistent view state. Returning to a page with a dropdown already open can be confusing. |
Member
There was a problem hiding this comment.
maybe we keep the previous version? the , for example is odd, and calling it confusing mm perhaps
icyJoseph
reviewed
Nov 11, 2026
icyJoseph
approved these changes
Nov 11, 2026
aurorascharff
enabled auto-merge (squash)
November 12, 2026 12:32
aurorascharff
disabled auto-merge
November 12, 2026 12:34
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
Adds the native popover example from #100208 to the existing Activity guide, with cleanup and unique IDs for elements in preserved pages. Also corrects the form-reset example to keep its callback ref stable across rerenders and distinguishes uncontrolled DOM values from controlled React state. Clarifies that an Effect running again does not necessarily mean a page was shown again, because Strict Mode also repeats setup and cleanup in development.
Verification
git diff --checkpass.