-
Notifications
You must be signed in to change notification settings - Fork 49.6k
[compiler] Allow setStates in use{Layout,Insertion}Effect where the set value is derived from a ref #34462
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.
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
Conversation
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
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Exciting! Thanks for the quick turnaround on this. It's a good start, see comments to make the logic more generic
…et value is derived from a ref @stipsan found this issue where the compiler would bailout on the `useLayoutEffect` examples in the React docs. While setState in an effect is typically an anti-pattern due to the fact that it hurts performance through cascading renders, the one scenario where it _is_ allowed is if the value being set flows from a ref.
josephsavona
approved these changes
Sep 10, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
awesome!
github-actions bot
pushed a commit
that referenced
this pull request
Sep 10, 2025
…et value is derived from a ref (#34462) @stipsan found this issue where the compiler would bailout on the `useLayoutEffect` examples in the React docs. While setState in an effect is typically an anti-pattern due to the fact that it hurts performance through cascading renders, the one scenario where it _is_ allowed is if the value being set flows from a ref. DiffTrain build for [835b009](835b009)
github-actions bot
pushed a commit
that referenced
this pull request
Sep 10, 2025
…et value is derived from a ref (#34462) @stipsan found this issue where the compiler would bailout on the `useLayoutEffect` examples in the React docs. While setState in an effect is typically an anti-pattern due to the fact that it hurts performance through cascading renders, the one scenario where it _is_ allowed is if the value being set flows from a ref. DiffTrain build for [835b009](835b009)
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 17, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ``` \`\`\`js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` \`\`\` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 17, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 17, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 17, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 17, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 17, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 18, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 18, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 18, 2025
…iler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 18, 2025
…iler (#7988) In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
poteto
added a commit
to reactjs/react.dev
that referenced
this pull request
Sep 18, 2025
* Add local eslint rule to validate markdown codeblocks with React Compiler In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs. In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided. To express that a codeblock has an expected error, we can use the following metadata: ```ts // pseudo type def type MarkdownCodeBlockMetadata = { expectedErrors?: { 'react-compiler'?: number[]; }; }; ``` and can be used like so: ```` ```js {expectedErrors: {'react-compiler': [4]}} // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); setCount(value); // error on L4 return <div>{count}</div>; } ``` ```` Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic. * fix compiler errors I went through the list of existing errors and tried to separate the expected errors from those that seem to be flagging unexpected issues. In particular, our effects validations are flagging patterns that our own docs examples use. I added todos for these and will follow up later.
mrbadri
added a commit
to reactjs/fa.react.dev
that referenced
this pull request
Sep 29, 2025
* fix: correct overlay highlighting in code examples (#7669)
* fix: the value property of checkbox to the checked property (#7804)
* No need for useState here — useCounter handles the state internally (#7803)
* docs: fix misplaced prepositional phrase error (#7799)
* Fix wrong documentation for effect events (#7800)
* Fix wrong documentation for effect events
* Update src/content/learn/separating-events-from-effects.md
---------
Co-authored-by: Ricky <rickhanlonii@gmail.com>
* Remove stray console.log and image (#7814)
* fix(template): remove unnecessary import of React in template code (#7750)
* fix(reference): correct singular form of 'Server Functions' to 'Server Function' (#7749)
* Add bold mono font (#7815)
---------
Co-authored-by: Nicolas Ettlin <nicolas.ettlin@me.com>
* Remove TODO comments and convert them to issues (#7743)
* Remove TODO comment and convert to an issue for react-test-renderer
* Remove TODO comment and convert to an issue for react-dom/test-utils
* Add example of `useActionState` handling execution order (#7733)
* docs: update vite link (#7784)
* docs: add bsky link (#7781)
* docs: add bsky link
rename twitter to x
* Update src/content/community/index.md
---------
Co-authored-by: Ricky <rickhanlonii@gmail.com>
* React Montreal Meetings have a new link (#7809)
* fix: remove useless content (#6615)
* fix: wrong verb tense in doc (#7818)
* fix: typo in challenge solution (#7816)
* Use experiemental in all uEE doc sandboxes (#7820)
* Author: Josh Story <story@hey.com>
Date: 2025-05-21 11:01:46 -0700
clarify the nonce and signal options for prerender docs
clarifies why nonce is not an option for prerender APIs.
clarifies how you would use signal to abort a prerender with in page documentation
* Fix wrong explanation in preserving-and-resetting-state (#6043)
* fix: correct broken WAI-ARIA modal dialog link in createPortal reference (#7833)
* fix link from ARIA dialog-modal
* chore: trigger CLA recheck
* Update meetups.md adding React Rajasthan Community (#7831)
Adding the React Community for Rajasthan India
* Update components-and-hooks-must-be-pure.md (#7830)
Some grammar fixes, and language clarifications
* Update referencing-values-with-refs.md (#7829)
Fixed invalid URL
* Add uwu click animation (#7822)
* Fix typo and clarily that a server function reference is created only when that function is used by a Client Component (#7746)
* Add React Alicante 2025 to Conferences page (#7674)
* fix: use const where applicable in examples for keeping components pure (#7819)
* Remove `forwardRef` reference from API listing (#7837)
This API is now under "Legacy APIs" and should probably no longer be listed as a "modern API".
* docs: Refactor context provider usage (#7793)
* delete provider
* Fix NavContext usage in Talks component
* Fix TocContext and LanguagesContext usage in Page component
* Fix IllustrationContext usage in IllustrationBlock component
* Fix LevelContext and TasksContext usage in managing-state.md
* Fix ThemeContext and Context usage in MyApp component
* Fix HighlightContext usage in List component
* Fix ThemeContext usage in MyApp component
* Fix ErrorDecoderContext usage in ErrorDecoderPage component
* Fix ThemeContext usage in MyPage and MyApp components
* Fix ThemeContext usage in MyApp component
* Fix useContext documentation to correct context provider references
* Fix context provider references in createContext documentation
* prettier
* Update src/content/reference/react/createContext.md
---------
Co-authored-by: Ricky <rickhanlonii@gmail.com>
* fix: typo in docs on prerendering (#7823)
* Replace Context.Provider with Context (#7838)
Update to be in line with the recommended way from React 19.
Docs https://react.dev/blog/2024/12/05/react-19#context-as-a-provider
---------
Co-authored-by: Ricky <rickhanlonii@gmail.com>
* fix(blog): resolve typo in React 19 blog post (`refs` → `ref`s) (#7828)
This PR corrects a small typo in the React documentation, changing "`refs`" to "`ref`s" for accuracy and consistency.
* Update analyze_comment.yml (#7840)
* Fix #6915: typo fix (#6917)
* fix: update ids to point to right part of the docs (#7854)
* chore: remove unused date-fns (#7856)
* chore: fix typo in resource and metadata components documentation (#7006)
* fix: correct typo in scaling-up-with-reducer-and-context.md (#7390)
Fix typo in the 'Step 3: Use context anywhere in the tree' section by changing TaskContext to TasksContext for accuracy.
* fix flushSync link (#7862)
* docs(react): fix grammar in forward ref deprecation message (#7864)
* [be] Add deadlinks script (#7879)
While rewriting the compiler docs I happened to notice some deadlinks. This PR adds a new `yarn deadlinks` script to identify all deadlinks.
I decided to make this a script for now for simplicity but in the future could be ported to an ESlint rule.
The script handles:
- [x] checks images correctly (images are stored in /public but links can omit the /public)
- [x] looks up React error codes for dynamic error pages
- [x] lints links to contributors and uses URL from acknowledgements page if the member is no longer active on the core team
- [x] special injected anchor tags like #recap and #challenges
Example:
```
yarn run v1.22.22
$ node scripts/deadLinkChecker.js
Checking 177 markdown files...
Fetched 552 React error codes
src/content/learn/add-react-to-an-existing-project.md:23:58
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/add-react-to-an-existing-project.md:27:45
Link text: benefit from the best practices
URL: /learn/start-a-new-react-project#can-i-use-react-without-a-framework
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/add-react-to-an-existing-project.md:152:269
Link text: a React framework
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/synchronizing-with-effects.md:735:18
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/typescript.md:16:3
Link text: Common types from `@types/react`
URL: /learn/typescript/#useful-types
✗ Target file not found for: /learn/typescript/
src/content/learn/typescript.md:17:3
Link text: Further learning locations
URL: /learn/typescript/#further-learning
✗ Target file not found for: /learn/typescript/
src/content/learn/typescript.md:23:5
Link text: production-grade React frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/you-might-not-need-an-effect.md:29:399
Link text: frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/you-might-not-need-an-effect.md:754:106
Link text: frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/your-first-component.md:218:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/ViewTransition.md:146:248
Link text: reveal content
URL: /link-to-suspense-below
✗ Target file not found for: /link-to-suspense-below
src/content/reference/react/captureOwnerStack.md:60:94
Link text: `errorInfo.componentStack` in `onUncaughtError`
URL: /reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
✗ Anchor #show-a-dialog-for-uncaught-errors not found in reference/react-dom/client/hydrateRoot.md
src/content/reference/react/forwardRef.md:9:65
Link text: here
URL: /blog/2024/04/25/react-19#ref-as-a-prop
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/reference/react/use.md:315:24
Link text: Server Component
URL: /reference/react/components#server-components
✗ Anchor #server-components not found in reference/react/components.md
src/content/reference/react/useEffect.md:899:67
Link text: if you use a framework,
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useEffect.md:1051:18
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useEffect.md:1736:92
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useInsertionEffect.md:136:65
Link text: non-blocking update,
URL: /reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition
✗ Anchor #marking-a-state-update-as-a-non-blocking-transition not found in reference/react/useTransition.md
src/content/reference/react-dom/createPortal.md:53:76
Link text: key.
URL: /learn/rendering-lists/#keeping-list-items-in-order-with-key
✗ Target file not found for: /learn/rendering-lists/
src/content/reference/react-dom/index.md:24:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/index.md:51:3
Link text: `unmountComponentAtNode`
URL: /reference/react-dom/unmountComponentAtNode
✗ Target file not found for: /reference/react-dom/unmountComponentAtNode
src/content/reference/react-dom/preinit.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preinitModule.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preload.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preloadModule.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/directives.md:13:36
Link text: bundlers compatible with React Server Components
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/server-components.md:7:34
Link text: React Server Components
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/server-functions.md:198:28
Link text: `useActionState`
URL: /reference/react-dom/hooks/useFormState
✗ Target file not found for: /reference/react-dom/hooks/useFormState
src/content/reference/rsc/server-functions.md:222:28
Link text: `useActionState`
URL: /reference/react-dom/hooks/useFormState
✗ Target file not found for: /reference/react-dom/hooks/useFormState
src/content/reference/rsc/use-client.md:44:77
Link text: compatible bundlers
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/use-server.md:98:54
Link text: serializable props
URL: /reference/rsc/use-client#passing-props-from-server-to-client-components
✗ Anchor #passing-props-from-server-to-client-components not found in reference/rsc/use-client.md
src/content/reference/react-dom/client/createRoot.md:212:278
Link text: using a framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/client/index.md:7:185
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/components/common.md:919:89
Link text: check out more examples.
URL: /reference/react/useRef#examples-dom
✗ Anchor #examples-dom not found in reference/react/useRef.md
src/content/reference/react-dom/components/form.md:39:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/form.md:233:63
Link text: reference documentation
URL: /reference/react/hooks/useOptimistic
✗ Target file not found for: /reference/react/hooks/useOptimistic
src/content/reference/react-dom/components/input.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/link.md:33:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/meta.md:33:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/option.md:39:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/progress.md:33:27
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/script.md:34:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/select.md:39:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/style.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/textarea.md:33:27
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/title.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/server/index.md:7:182
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/static/index.md:7:146
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2023/03/16/introducing-react-dev.md:45:5
Link text: API Reference
URL: /reference
✗ Target file not found for: /reference
src/content/blog/2023/03/16/introducing-react-dev.md:610:117
Link text: Alternatives
URL: /reference/react-dom/findDOMNode#alternatives
✗ Target file not found for: /reference/react-dom/findDOMNode
src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:34:40
Link text: Next.js App Router
URL: /learn/start-a-new-react-project#nextjs-app-router
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:95:605
Link text: Next.js App Router
URL: /learn/start-a-new-react-project#nextjs-app-router
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md:110:3
Link text: Sathya Gunasekaran
URL: /community/team#sathya-gunasekaran
✗ Contributor link should be updated to: https://github.com/gsathya
src/content/blog/2024/04/25/react-19-upgrade-guide.md:132:20
Link text: improved how errors are handled
URL: /blog/2024/04/25/react-19#error-handling
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/blog/2024/04/25/react-19-upgrade-guide.md:502:19
Link text: `ref` as a prop
URL: /blog/2024/04/25/react-19#ref-as-a-prop
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/blog/2024/12/05/react-19.md:358:391
Link text: Full-stack React Architecture
URL: /learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2024/12/05/react-19.md:392:28
Link text: React Server Actions
URL: /reference/rsc/server-actions
✗ Target file not found for: /reference/rsc/server-actions
src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md:2498:37
Link text: view transition classes
URL: /reference/react/ViewTransition#view-transition-classes
✗ Anchor #view-transition-classes not found in reference/react/ViewTransition.md
Found 58 dead links out of 1555 total links
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
* Fix deadlinks (#7880)
* [be] Add deadlinks script
While rewriting the compiler docs I happened to notice some deadlinks. This PR adds a new `yarn deadlinks` script to identify all deadlinks.
I decided to make this a script for now for simplicity but in the future could be ported to an ESlint rule.
The script handles:
- [x] checks images correctly (images are stored in /public but links can omit the /public)
- [x] looks up React error codes for dynamic error pages
- [x] lints links to contributors and uses URL from acknowledgements page if the member is no longer active on the core team
- [x] special injected anchor tags like #recap and #challenges
Example:
```
yarn run v1.22.22
$ node scripts/deadLinkChecker.js
Checking 177 markdown files...
Fetched 552 React error codes
src/content/learn/add-react-to-an-existing-project.md:23:58
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/add-react-to-an-existing-project.md:27:45
Link text: benefit from the best practices
URL: /learn/start-a-new-react-project#can-i-use-react-without-a-framework
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/add-react-to-an-existing-project.md:152:269
Link text: a React framework
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/synchronizing-with-effects.md:735:18
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/typescript.md:16:3
Link text: Common types from `@types/react`
URL: /learn/typescript/#useful-types
✗ Target file not found for: /learn/typescript/
src/content/learn/typescript.md:17:3
Link text: Further learning locations
URL: /learn/typescript/#further-learning
✗ Target file not found for: /learn/typescript/
src/content/learn/typescript.md:23:5
Link text: production-grade React frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/you-might-not-need-an-effect.md:29:399
Link text: frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/you-might-not-need-an-effect.md:754:106
Link text: frameworks
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/learn/your-first-component.md:218:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/ViewTransition.md:146:248
Link text: reveal content
URL: /link-to-suspense-below
✗ Target file not found for: /link-to-suspense-below
src/content/reference/react/captureOwnerStack.md:60:94
Link text: `errorInfo.componentStack` in `onUncaughtError`
URL: /reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
✗ Anchor #show-a-dialog-for-uncaught-errors not found in reference/react-dom/client/hydrateRoot.md
src/content/reference/react/forwardRef.md:9:65
Link text: here
URL: /blog/2024/04/25/react-19#ref-as-a-prop
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/reference/react/use.md:315:24
Link text: Server Component
URL: /reference/react/components#server-components
✗ Anchor #server-components not found in reference/react/components.md
src/content/reference/react/useEffect.md:899:67
Link text: if you use a framework,
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useEffect.md:1051:18
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useEffect.md:1736:92
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react/useInsertionEffect.md:136:65
Link text: non-blocking update,
URL: /reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition
✗ Anchor #marking-a-state-update-as-a-non-blocking-transition not found in reference/react/useTransition.md
src/content/reference/react-dom/createPortal.md:53:76
Link text: key.
URL: /learn/rendering-lists/#keeping-list-items-in-order-with-key
✗ Target file not found for: /learn/rendering-lists/
src/content/reference/react-dom/index.md:24:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/index.md:51:3
Link text: `unmountComponentAtNode`
URL: /reference/react-dom/unmountComponentAtNode
✗ Target file not found for: /reference/react-dom/unmountComponentAtNode
src/content/reference/react-dom/preinit.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preinitModule.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preload.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/preloadModule.md:7:1
Link text: React-based frameworks
URL: /learn/start-a-new-react-project
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/directives.md:13:36
Link text: bundlers compatible with React Server Components
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/server-components.md:7:34
Link text: React Server Components
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/server-functions.md:198:28
Link text: `useActionState`
URL: /reference/react-dom/hooks/useFormState
✗ Target file not found for: /reference/react-dom/hooks/useFormState
src/content/reference/rsc/server-functions.md:222:28
Link text: `useActionState`
URL: /reference/react-dom/hooks/useFormState
✗ Target file not found for: /reference/react-dom/hooks/useFormState
src/content/reference/rsc/use-client.md:44:77
Link text: compatible bundlers
URL: /learn/start-a-new-react-project#full-stack-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/rsc/use-server.md:98:54
Link text: serializable props
URL: /reference/rsc/use-client#passing-props-from-server-to-client-components
✗ Anchor #passing-props-from-server-to-client-components not found in reference/rsc/use-client.md
src/content/reference/react-dom/client/createRoot.md:212:278
Link text: using a framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/client/index.md:7:185
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/components/common.md:919:89
Link text: check out more examples.
URL: /reference/react/useRef#examples-dom
✗ Anchor #examples-dom not found in reference/react/useRef.md
src/content/reference/react-dom/components/form.md:39:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/form.md:233:63
Link text: reference documentation
URL: /reference/react/hooks/useOptimistic
✗ Target file not found for: /reference/react/hooks/useOptimistic
src/content/reference/react-dom/components/input.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/link.md:33:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/meta.md:33:23
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/option.md:39:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/progress.md:33:27
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/script.md:34:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/select.md:39:25
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/style.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/textarea.md:33:27
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/components/title.md:33:24
Link text: common element props.
URL: /reference/react-dom/components/common#props
✗ Anchor #props not found in reference/react-dom/components/common.md
src/content/reference/react-dom/server/index.md:7:182
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/reference/react-dom/static/index.md:7:146
Link text: framework
URL: /learn/start-a-new-react-project#production-grade-react-frameworks
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2023/03/16/introducing-react-dev.md:45:5
Link text: API Reference
URL: /reference
✗ Target file not found for: /reference
src/content/blog/2023/03/16/introducing-react-dev.md:610:117
Link text: Alternatives
URL: /reference/react-dom/findDOMNode#alternatives
✗ Target file not found for: /reference/react-dom/findDOMNode
src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:34:40
Link text: Next.js App Router
URL: /learn/start-a-new-react-project#nextjs-app-router
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md:95:605
Link text: Next.js App Router
URL: /learn/start-a-new-react-project#nextjs-app-router
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md:110:3
Link text: Sathya Gunasekaran
URL: /community/team#sathya-gunasekaran
✗ Contributor link should be updated to: https://github.com/gsathya
src/content/blog/2024/04/25/react-19-upgrade-guide.md:132:20
Link text: improved how errors are handled
URL: /blog/2024/04/25/react-19#error-handling
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/blog/2024/04/25/react-19-upgrade-guide.md:502:19
Link text: `ref` as a prop
URL: /blog/2024/04/25/react-19#ref-as-a-prop
✗ Target file not found for: /blog/2024/04/25/react-19
src/content/blog/2024/12/05/react-19.md:358:391
Link text: Full-stack React Architecture
URL: /learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision
✗ Target file not found for: /learn/start-a-new-react-project
src/content/blog/2024/12/05/react-19.md:392:28
Link text: React Server Actions
URL: /reference/rsc/server-actions
✗ Target file not found for: /reference/rsc/server-actions
src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md:2498:37
Link text: view transition classes
URL: /reference/react/ViewTransition#view-transition-classes
✗ Anchor #view-transition-classes not found in reference/react/ViewTransition.md
Found 58 dead links out of 1555 total links
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
* Fix deadlinks
Following `yarn deadlinks` as a guide, I fixed the following deadlinks:
| File | Link Text | Current URL | Issue Type | Actual Fix Applied | Status |
|------|-----------|-------------|------------|-------------------|--------|
| `add-react-to-an-existing-project.md:23` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| `add-react-to-an-existing-project.md:27` | benefit from the best practices | `/learn/start-a-new-react-project#can-i-use-react-without-a-framework` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `add-react-to-an-existing-project.md:152` | a React framework | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| `synchronizing-with-effects.md:735` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `typescript.md:16` | Common types from `@types/react` | `/learn/typescript/#useful-types` | Trailing slash | `/learn/typescript#useful-types` | ✅ Fixed |
| `typescript.md:17` | Further learning locations | `/learn/typescript/#further-learning` | Trailing slash | `/learn/typescript#further-learning` | ✅ Fixed |
| `typescript.md:23` | production-grade React frameworks | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `you-might-not-need-an-effect.md:29` | frameworks | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `you-might-not-need-an-effect.md:754` | frameworks | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `your-first-component.md:218` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| `ViewTransition.md:146` | reveal content | `/link-to-suspense-below` | Placeholder URL | `/reference/react/Suspense#revealing-content-together-at-once` | ✅ Fixed |
| `captureOwnerStack.md:60` | `errorInfo.componentStack` in `onUncaughtError` | `/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors` | Missing anchor | `/reference/react-dom/client/hydrateRoot#error-logging-in-production` | ✅ Fixed |
| `forwardRef.md:9` | here | `/blog/2024/04/25/react-19#ref-as-a-prop` | Missing file + anchor | `/blog/2024/12/05/react-19#ref-as-a-prop` | ✅ Fixed |
| `use.md:315` | Server Component | `/reference/react/components#server-components` | Missing anchor | `/reference/rsc/server-components` | ✅ Fixed |
| `useEffect.md:899` | if you use a framework, | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `useEffect.md:1051` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `useEffect.md:1736` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `useInsertionEffect.md:136` | non-blocking update, | `/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition` | Wrong anchor | `/reference/react/useTransition#perform-non-blocking-updates-with-actions` | ✅ Fixed |
| `createPortal.md:53` | key. | `/learn/rendering-lists/#keeping-list-items-in-order-with-key` | Trailing slash | `/learn/rendering-lists#keeping-list-items-in-order-with-key` | ✅ Fixed |
| `react-dom/index.md:24` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| `react-dom/index.md:51` | `unmountComponentAtNode` | `/reference/react-dom/unmountComponentAtNode` | Missing file | `https://18.react.dev/reference/react-dom/unmountComponentAtNode` | ✅ Fixed |
| `preinit.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| `preinitModule.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| `preload.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| `preloadModule.md:7` | React-based frameworks | `/learn/start-a-new-react-project` | Missing file | `/learn/creating-a-react-app` | ✅ Fixed |
| 11 component files | common element props. | `/reference/react-dom/components/common#props` | Wrong anchor | `/reference/react-dom/components/common#common-props` | ✅ Fixed |
| `server/index.md:7` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `static/index.md:7` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file + anchor | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `introducing-react-dev.md:45` | API Reference | `/reference` | Missing index | `/reference/react` | ✅ Fixed |
| `introducing-react-dev.md:610` | Alternatives | `/reference/react-dom/findDOMNode#alternatives` | Missing file | `https://18.react.dev/reference/react-dom/findDOMNode#alternatives` | ✅ Fixed |
| `react-labs-march-2023.md:34` | Next.js App Router | `/learn/start-a-new-react-project#nextjs-app-router` | Missing file + anchor | `/learn/creating-a-react-app#nextjs-app-router` | ✅ Fixed |
| `react-labs-march-2023.md:95` | Next.js App Router | `/learn/start-a-new-react-project#nextjs-app-router` | Missing file + anchor | `/learn/creating-a-react-app#nextjs-app-router` | ✅ Fixed |
| `react-labs-february-2024.md:110` | Sathya Gunasekaran | `/community/team#sathya-gunasekaran` | Contributor link | `https://github.com/gsathya` | ✅ Fixed |
| `react-19-upgrade-guide.md:132` | improved how errors are handled | `/blog/2024/04/25/react-19#error-handling` | Missing file + anchor | `/blog/2024/12/05/react-19#error-handling` | ✅ Fixed |
| `react-19-upgrade-guide.md:502` | `ref` as a prop | `/blog/2024/04/25/react-19#ref-as-a-prop` | Missing file + anchor | `/blog/2024/12/05/react-19#ref-as-a-prop` | ✅ Fixed |
| `react-19.md:358` | Full-stack React Architecture | `/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision` | Missing file + anchor | `/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision` | ✅ Fixed |
| `react-19.md:392` | React Server Actions | `/reference/rsc/server-actions` | Missing file | `/reference/rsc/server-functions` | ✅ Fixed |
| `view-transitions-activity.md:2498` | view transition classes | `/reference/react/ViewTransition#view-transition-classes` | Missing anchor | `/reference/react/ViewTransition#view-transition-class` | ✅ Fixed |
| `rsc/directives.md:13` | bundlers compatible with React Server Components | `/learn/start-a-new-react-project#full-stack-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `rsc/server-components.md:7` | React Server Components | `/learn/start-a-new-react-project#full-stack-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `rsc/use-client.md:44` | compatible bundlers | `/learn/start-a-new-react-project#full-stack-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `react-dom/client/createRoot.md:212` | using a framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `react-dom/client/index.md:7` | framework | `/learn/start-a-new-react-project#production-grade-react-frameworks` | Missing file | `/learn/creating-a-react-app#full-stack-frameworks` | ✅ Fixed |
| `rsc/server-functions.md:198` | `useActionState` | `/reference/react-dom/hooks/useFormState` | Missing file | `/reference/react/useActionState` | ✅ Fixed |
| `rsc/server-functions.md:222` | `useActionState` | `/reference/react-dom/hooks/useFormState` | Missing file | `/reference/react/useActionState` | ✅ Fixed |
| `rsc/use-server.md:98` | serializable props | `/reference/rsc/use-client#passing-props-from-server-to-client-components` | Missing anchor | `/reference/rsc/use-client#serializable-types` | ✅ Fixed |
| `react-dom/components/common.md:919` | check out more examples. | `/reference/react/useRef#examples-dom` | Missing anchor | `/reference/react/useRef#usage` | ✅ Fixed |
| `react-dom/components/form.md:233` | reference documentation | `/reference/react/hooks/useOptimistic` | Missing file | `/reference/react/useOptimistic` | ✅ Fixed |
```
$ yarn deadlinks
yarn run v1.22.22
$ node scripts/deadLinkChecker.js
Checking 177 markdown files...
Fetched 552 React error codes
✓ All 1552 links are valid!
✨ Done in 1.07s.
```
* Revert "Fix deadlinks (#7880)" (#7881)
Original commit changeset: d52b3ec73407
Revert this so we can just fix the real deadlinks.
* Update deadlinks script to take into account redirects (#7882)
* Revert "Fix deadlinks (#7880)"
Original commit changeset: d52b3ec73407
Revert this so we can just fix the real deadlinks.
* Update deadlinks script to take into account redirects
Also check if a redirect exists before erroring.
* Fix deadlinks take 2 (#7883)
Fixes the actual broken links.
```
$ yarn deadlinks
yarn run v1.22.22
$ node scripts/deadLinkChecker.js
Checking 177 markdown files...
Fetched 552 React error codes
Loaded 49 redirects from vercel.json
✓ All 1554 links are valid!
✨ Done in 0.86s.
```
* [compiler] Rewrite React Compiler Docs (#7868)
* Fix deadlinks take 2
Fixes the actual broken links.
```
$ yarn deadlinks
yarn run v1.22.22
$ node scripts/deadLinkChecker.js
Checking 177 markdown files...
Fetched 552 React error codes
Loaded 49 redirects from vercel.json
✓ All 1554 links are valid!
✨ Done in 0.86s.
```
* [compiler] Rewrite React Compiler Docs
We've received [feedback](https://bsky.app/profile/danabra.mov/post/3lr46ciujjs2r) that the compiler docs are difficult to understand and not prominent enough that people don't realize the compiler is a serious project and is near stable.
This PR rewrites the whole compiler doc section, giving it its own category as well as a standalone reference page.
Preview: https://react-dev-git-pr7868-fbopensource.vercel.app/
* [compiler] Fix misleading code example (#7889)
When the compiler bails out on code, it leaves it untouched and unoptimized, so it's always safe for the compiler to bailout.
`panicThreshold` in most cases should be kept as `'none'` unless you want to fail the build on these safe bailouts. It's really only useful during dev when you're working on increasing the coverage of the compiler on your codebase.
I think having it shown here is confusing so I'm opting to just remove it for this particular code example.
* [compiler] Flesh out incremental adoption intro more (#7890)
Previously the intro was pretty barebones. Fleshed it out a bit more to describe why it might be useful to reach for in a large codebase.
* [compiler] Add note about gating evaluation (#7891)
* [compiler] Flesh out incremental adoption intro more
Previously the intro was pretty barebones. Fleshed it out a bit more to describe why it might be useful to reach for in a large codebase.
* [compiler] Add note about gating evaluation
Clarify when the gating function is evaluated.
* Remove non-existent meetup group (Edinburgh, Scotland) (#7895)
The Edinburgh meetup group no longer exists and I have been unable to find any other Scottish React groups
* Fixes animation jank on hover (#7904)
* fix: box-shadow animation on community (#7905)
Co-authored-by: Fre <frederic.vandeborne@icapps.com>
* Updates to Activity docs (#7884)
* Updates to Activity docs
* wip
* Updates to Activity docs:
- New intro at top of Reference
- Adds "Deferring hydration of low-priority content" section
- Move "Preventing hidden content from having unwanted side effects" section to Troubleshooting
- Removes SSR section from Troubleshooting
* useLayoutEffect + Tidying up
* Use the same color code step for "visible"
* Tidy
* Typo
* Update section on selective hydration
* Update title
* Clean up props
* Tweak wording
* wip
* wip
* wip
* remove temporary scroll restoration while working on docs
* wip
* wip
* Add more information about event and property binding on custom elements (#7939)
Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>
* Touch-ups to Activity (#7940)
* Add React Paris 2025 conference talks + Add React Paris 2026 (#7935)
Co-authored-by: Aimen Ben Amor <aimen_ben_amor@epam.com>
* Add CityJS New Delhi 2026 conference details (#7949)
* Add CityJS New Delhi 2026 conference details
* Update CityJS New Delhi date to 2025
* [compiler] Tweak intro section on manual memo guidance (#7953)
The previous sentence "If you are using React Compiler, useMemo, useCallback, and React.memo can be removed." was coming off a bit too strong and makes it incorrectly seem like the manual memos and compiler memos are 1:1.
Removing the sentence doesn't take anything away from this paragraph, so let's remove it to reduce confusion.
* [compiler][ez] Reference rc tag for install instructions (#7955)
Updates our previous RC blogpost to point people to the `rc` tag, not the specific rc version
* [compiler] Update docs on eslint-plugin-react-hooks installation (#7956)
The compiler rule is now enabled by default in 6.0.0-rc.2, so there is no longer a need to manually enable the compiler rule in user's eslint configs.
* Add reload button, rename reset to clear (#7954)
* fix: typo in component style documentation (#7925)
* fix broken link server-functions (#7923)
* docs: Add Rendercon 2025 Conference (#7962)
* feat(i18n): make DocsPageFooter navigation labels translatable (#7943)
* fix(rtl): resolve RTL issues in Challenges component (#7942)
* Introduce Liverpool and Edinburgh meetup groups. (#7950)
* docs: fix typo in update useTransition.md (#7936)
* docs: fix ordered list numbering in TypeScript with React Components section (#7941)
* Docs: update ref callback behaviour (#7927)
* Add setup to home sidebar (#7963)
* fix: definition typo on view transitions blog post (#7918)
* Fix: grammar and add comma (#7917)
Co-authored-by: unknown <deepanshu.9dd@gmail.com~>
* fix: typo (#7914)
* Recommend installing `@types/*` as dev dependencies
* docs: minor grammar correction (#7906)
`a expensive` should be `an expensive`
* fix : typo in form component documentation (#7894)
Fix "documentatino" typo to "documentation" in comment about useOptimistic reference page.
* Update "Deep Dive" in reusing-logic-with-custom-hooks.md with link and example of the use API (#7767)
* Update "Deep Dive" in reusing-logic-with-custom-hooks.md with link to and example of the use API
* Remove mention of Server Components when explaining the use API
* Update src/content/learn/reusing-logic-with-custom-hooks.md
Co-authored-by: Ricky <rickhanlonii@gmail.com>
* fix: Correct which lines are highlighted in code example
---------
Co-authored-by: Ricky <rickhanlonii@gmail.com>
* Add note that form actions are actions (#7964)
* Remove deprecated loremflickr placeholder images (#7968)
The previous examples used a service called loremflickr.com to link to placeholder images. Since that service is now down, I updated them to reference placecats.com instead, which we already use in other examples as well. placecats doesn't have the same random cat feature so I roughly approximated it in the example code.
Closes #7966
* Fix handleClick compiler intro example (#7967)
* Fix handleClick compiler intro example
* Use a note instead
* Update src/content/learn/react-compiler/introduction.md
* Fix/tictactoe docs invalid file names (#7969)
* fix: changed source file names in docs from App.js, index.js and styles.css to src/ dir
* fix: updated wrong image with the correct one with current sandbox file structure
* refactor: reverted all formatting and just just mention src folder in introductory section
* Reverted changes tutorial-tic-tac-toe.md
* added enhanced image of sandbox
* Add React Conf 2024 to /videos (#7977)
* docs: add flushSync Troubleshooting section (#7978)
* docs: add flushSync Troubleshooting section
* Update src/content/reference/react-dom/flushSync.md
* oops
* Apply suggestions from code review
* formatting and pitfall
---------
Co-authored-by: Ricky <rickhanlonii@gmail.com>
Co-authored-by: Rick Hanlon <rickhanlonii@meta.com>
* Bump Activity docs to canary (#7974)
* correct IconExperimental naming and usage (from #7972)
Co-authored-by: Tuna <198469603+TunaDev0@users.noreply.github.com>
* Bump Activity to Canary in docs
---------
Co-authored-by: Tuna <198469603+TunaDev0@users.noreply.github.com>
* Upgrade babel-plugin-react-compiler (#7985)
Happened to notice we were still on an old version of the compiler. This PR upgrades us to use the latest RC.
* Add copyright script (#7991)
Copied over our copyright script from the react repo. I made a small fix to handle shebangs.
* Update copyright on all files (#7992)
* Add copyright script
Copied over our copyright script from the react repo. I made a small fix to handle shebangs.
* Update copyright on all files
Run the script.
* Add local eslint rule to validate markdown codeblocks with React Compiler (#7988)
In https://github.com/facebook/react/pull/34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs.
In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided.
To express that a codeblock has an expected error, we can use the following metadata:
```ts
// pseudo type def
type MarkdownCodeBlockMetadata = {
expectedErrors?: {
'react-compiler'?: number[];
};
};
```
and can be used like so:
````
```js {expectedErrors: {'react-compiler': [4]}}
// ❌ setState directly in render
function Component({value}) {
const [count, setCount] = useState(0);
setCount(value); // error on L4
return <div>{count}</div>;
}
```
````
Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
* fix compiler errors (#7989)
* Add local eslint rule to validate markdown codeblocks with React Compiler
In https://github.com/facebook/react/pull/34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs.
In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided.
To express that a codeblock has an expected error, we can use the following metadata:
```ts
// pseudo type def
type MarkdownCodeBlockMetadata = {
expectedErrors?: {
'react-compiler'?: number[];
};
};
```
and can be used like so:
````
```js {expectedErrors: {'react-compiler': [4]}}
// ❌ setState directly in render
function Component({value}) {
const [count, setCount] = useState(0);
setCount(value); // error on L4
return <div>{count}</div>;
}
```
````
Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.
* fix compiler errors
I went through the list of existing errors and tried to separate the expected errors from those that seem to be flagging unexpected issues. In particular, our effects validations are flagging patterns that our own docs examples use. I added todos for these and will follow up later.
* Revert "fix compiler errors (#7989)" (#7995)
This reverts commit 5cc9b7ba31630dd3a2e8178b007e876f83489a54.
* Ignore braces when building Sandpack file map (#7996)
Previously, `createFileMap` split the MDX meta string on spaces and assumed the first token was the filename. Once we prefixed code fences with `{expectedErrors: ...}`, it would incorrectly parse the meta and crash.
This PR updates createFileMap to skip tokens in the meta containing a start and end brace pair (using a stack to ensure we close on the correct brace) while tokenizing the meta string as expected.
Test plan: pages reported in #7994 no longer crash on the next PR
Closes #7994
* Restore lint corrections from #7989 (#7997)
* Ignore braces when building Sandpack file map
Previously, `createFileMap` split the MDX meta string on spaces and assumed the first token was the filename. Once we prefixed code fences with `{expectedErrors: ...}`, it would incorrectly parse the meta and crash.
This PR updates createFileMap to skip tokens in the meta containing a start and end brace pair (using a stack to ensure we close on the correct brace) while tokenizing the meta string as expected.
Test plan: pages reported in #7994 no longer crash on the next PR
Closes #7994
* Restore lint corrections from #7989
Reverts the revert now that we've fixed the bug. These pages should no longer crash:
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/referencing-values-with-refs
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/synchronizing-with-effects
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/separating-events-from-effects
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/removing-effect-dependencies
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/you-might-not-need-an-effect
* Install eslint-local-rules as postinstall (#7993)
For local dev and CI we want to have the eslint-local-rules running, so let's make sure both have their dependencies installed. We don't use a monorepo setup here, which is why they're currently setup as a two completely independent yarn workspaces.
* Add new eslint rule reference docs (#7986)
Adds new docs for our new eslint rules.
* fix confilict
---------
Co-authored-by: Mohammad Reza Badri <85818966+mrbadri@users.noreply.github.com>
Co-authored-by: kosh <sipuofare631@gmail.com>
Co-authored-by: Gourav Bhardwaj <98509451+gbhardwaj00@users.noreply.github.com>
Co-authored-by: Mehmet Mallı <mallimehmet@gmail.com>
Co-authored-by: Ricky <rickhanlonii@gmail.com>
Co-authored-by: Ryosuke Hoda <h.ryosuke820@gmail.com>
Co-authored-by: Nicolas Ettlin <nicolas.ettlin@me.com>
Co-authored-by: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com>
Co-authored-by: Ajit <47279189+ajits01@users.noreply.github.com>
Co-authored-by: bornkiss <101384056+bornkiss@users.noreply.github.com>
Co-authored-by: Eric Cote <eric@coteexpert.com>
Co-authored-by: Xleine <xleine@qq.com>
Co-authored-by: Ayman Alhourani <139303034+aalhoura@users.noreply.github.com>
Co-authored-by: Josh Story <story@hey.com>
Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
Co-authored-by: Dmitry Titov <61434098+dimatitov@users.noreply.github.com>
Co-authored-by: Shubham Gupta <50445450+shubhamui@users.noreply.github.com>
Co-authored-by: G. van Dorland <giodor13@gmail.com>
Co-authored-by: Julius Lundang <cHaLkdusT@users.noreply.github.com>
Co-authored-by: jinsoo <89149734+Jinsoo1004@users.noreply.github.com>
Co-authored-by: John Kapantzakis <kapantzak@gmail.com>
Co-authored-by: Mike DiDomizio <mikedidomizio@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
Co-authored-by: Jan Kassens <jkassens@meta.com>
Co-authored-by: minami yoshihiko <ymym1990ymym@gmail.com>
Co-authored-by: Kunall Banerjee <14703164+yeskunall@users.noreply.github.com>
Co-authored-by: Amirhossein Alibakhshi <amir78729@gmail.com>
Co-authored-by: Jatin Singh <jadenrizz31@gmail.com>
Co-authored-by: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com>
Co-authored-by: Noritaka Kobayashi <arukimedesu1166777@gmail.com>
Co-authored-by: Dipesh B C <50456672+bcdipesh@users.noreply.github.com>
Co-authored-by: Simon Schick <demwizzy@gmail.com>
Co-authored-by: lauren <poteto@users.noreply.github.com>
Co-authored-by: melanterite <74186236+melanterite@users.noreply.github.com>
Co-authored-by: Wes Bos <wesbos@gmail.com>
Co-authored-by: Chez Fre <fredvandeborne@hotmail.com>
Co-authored-by: Fre <frederic.vandeborne@icapps.com>
Co-authored-by: Sam Selikoff <sam.selikoff@gmail.com>
Co-authored-by: Corbin Crutchley <crutchcorn@gmail.com>
Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>
Co-authored-by: Ben Amor Aymen <aymenbenamor.bardo@gmail.com>
Co-authored-by: Aimen Ben Amor <aimen_ben_amor@epam.com>
Co-authored-by: Aris Markogiannakis <aristos_m@hotmail.com>
Co-authored-by: SeungMin Shin <sky2197kr@gmail.com>
Co-authored-by: Pouria Damavandi <98946406+PouriaDamavandi@users.noreply.github.com>
Co-authored-by: ramadevsign <50571688+orama254@users.noreply.github.com>
Co-authored-by: asimno <baskinjason2@gmail.com>
Co-authored-by: Brooks Lybrand <brookslybrand@gmail.com>
Co-authored-by: ninamma <32230328+ninamma@users.noreply.github.com>
Co-authored-by: Vitor Monteiro <76404081+vitormrmonteiro@users.noreply.github.com>
Co-authored-by: Deepanshu <112980826+deepu7ds@users.noreply.github.com>
Co-authored-by: unknown <deepanshu.9dd@gmail.com~>
Co-authored-by: Raghunath Prabhakar <82239949+Raghuboi@users.noreply.github.com>
Co-authored-by: Dejumo <adejumoboluwatife8@gmail.com>
Co-authored-by: Fergus Ruston <fergus.ruston@gmail.com>
Co-authored-by: Jinhyun Park <developerjhp@gmail.com>
Co-authored-by: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Co-authored-by: Muhammad Tayyab <115396843+mtayyabrawan@users.noreply.github.com>
Co-authored-by: Akshay Ashok <aks28id@gmail.com>
Co-authored-by: Rick Hanlon <rickhanlonii@meta.com>
Co-authored-by: Tuna <198469603+TunaDev0@users.noreply.github.com>
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.
@stipsan found this issue where the compiler would bailout on the
useLayoutEffectexamples in the React docs. While setState in an effect is typically an anti-pattern due to the fact that it hurts performance through cascading renders, the one scenario where it is allowed is if the value being set flows from a ref.