Skip to content

Fix React Effect remount guidance #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lidorcg wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix React Effect remount guidance #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion skills/.curated/react/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "1.2.4",
"version": "1.2.5",
"organization": "React Best Practices",
"technology": "React",
"date": "May 2026",
Expand Down
2 changes: 1 addition & 1 deletion skills/.curated/react/references/conc-concurrent-safe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ tags: conc, render-purity, side-effects, idempotent-render
- Reading `window.innerWidth`, `document.cookie`, or other browser-only globals directly in render — works once, breaks under SSR and breaks again under interrupted renders.
- A `Math.random()` or `Date.now()` value persisted into a `useState` initializer's body (the unwrapped form) instead of the lazy initializer — value changes on every render attempt.

The canonical resolution: side effects go in `useEffect`/`useLayoutEffect`; external state reads go through `useSyncExternalStore`; stable identifiers come from `useId` or `useRef`; "once on mount" intent is rare and should be expressed via an effect with an empty deps and ref-guarded body, not via render-body code.
The canonical resolution: synchronization with external systems goes in `useEffect`/`useLayoutEffect` with complete dependencies and cleanup that mirrors setup; external state reads go through `useSyncExternalStore`; stable identifiers come from `useId` or `useRef`; app initialization belongs at module scope or in a framework boot hook. Effects must remain correct across a setup → cleanup → setup cycle.

**Incorrect (side effects during render):**

Expand Down