* 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
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
* 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>
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.
* 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
* [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.
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.
* 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/
* Revert "Fix deadlinks (#7880)"
Original commit changeset: d52b3ec734
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.
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.
```
