Merge branch 'main' of https://github.com/reactjs/reactjs.org into sy…

…nc-119177b8

beta/package.json

@@ -67,7 +67,7 @@
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "experimental",
+    "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "gray-matter": "^4.0.2",

beta/patches/@codemirror+lang-javascript+0.19.6.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js
+index d089f6b..db09ea6 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.js
++++ b/node_modules/@codemirror/lang-javascript/dist/index.js
+@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({
+                 JSXText: tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName),
+             })
+         ]
+     }),

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -3,11 +3,10 @@
  */
 
 import cn from 'classnames';
-import {highlightTree} from '@codemirror/highlight';
+import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
 import {javascript} from '@codemirror/lang-javascript';
 import {html} from '@codemirror/lang-html';
 import {css} from '@codemirror/lang-css';
-import {HighlightStyle, tags} from '@codemirror/highlight';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
 
@@ -233,7 +232,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
       class: classNameToken('static'),
     },
     {
-      tag: tags.tagName,
+      tag: tags.standard(tags.tagName),
       class: classNameToken('tag'),
     },
     {tag: tags.variableName, class: classNameToken('plain')},
@@ -244,7 +243,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
     },
     {
       // Highlight function definition differently (eg: functional component def in React)
-      tag: tags.definition(tags.function(tags.variableName)),
+      tag: [tags.definition(tags.function(tags.variableName)), tags.tagName],
       class: classNameToken('definition'),
     },
     {

beta/src/content/apis/react/useEffect.md

@@ -1653,11 +1653,11 @@ function Page({ url, shoppingCart }) {
 }
 ```
 
-**What if you want to log a new page visit after every `url` change, but *not* if only the `shoppingCart` changes?** You can't exclude `shoppingCart` from dependencies without breaking the [reactivity rules.](#specifying-reactive-dependencies) However, you can express that you *don't want* a piece of code to "react" to changes even though it is called from inside an Effect. To do this, [declare an *Event function*](/learn/separating-events-from-effects#declaring-an-event-function) with the [`useEvent`](/apis/react/useEvent) Hook, and move the code that reads `shoppingCart` inside of it:
+**What if you want to log a new page visit after every `url` change, but *not* if only the `shoppingCart` changes?** You can't exclude `shoppingCart` from dependencies without breaking the [reactivity rules.](#specifying-reactive-dependencies) However, you can express that you *don't want* a piece of code to "react" to changes even though it is called from inside an Effect. [Declare an *Effect Event*](/learn/separating-events-from-effects#declaring-an-effect-event) with the [`useEffectEvent`](/apis/react/useEffectEvent) Hook, and move the code that reads `shoppingCart` inside of it:
 
 ```js {2-4,7,8}
 function Page({ url, shoppingCart }) {
-  const onVisit = useEvent(visitedUrl => {
+  const onVisit = useEffectEvent(visitedUrl => {
     logVisit(visitedUrl, shoppingCart.length)
   });
 
@@ -1668,9 +1668,9 @@ function Page({ url, shoppingCart }) {
 }
 ```
 
-**Event functions are not reactive and don't need to be specified as dependencies of your Effect.** This is what lets you put non-reactive code (where you can read the latest value of some props and state) inside of them. For example, by reading `shoppingCart` inside of `onVisit`, you ensure that `shoppingCart` won't re-run your Effect.
+**Effect Events are not reactive and must always be omitted from dependencies of your Effect.** This is what lets you put non-reactive code (where you can read the latest value of some props and state) inside of them. For example, by reading `shoppingCart` inside of `onVisit`, you ensure that `shoppingCart` won't re-run your Effect. In the future, the linter will support `useEffectEvent` and check that you omit Effect Events from dependencies.
 
-[Read more about how Event functions let you separate reactive and non-reactive code.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-event-functions)
+[Read more about how Effect Events let you separate reactive and non-reactive code.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
 
 
 ---
@@ -1751,6 +1751,8 @@ function ChatRoom({ roomId }) {
 
 * If your Effect wasn't caused by an interaction (like a click), React will let the browser **paint the updated screen first before running your Effect.** If your Effect is doing something visual (for example, positioning a tooltip), and the delay is noticeable (for example, it flickers), you need to replace `useEffect` with [`useLayoutEffect`.](/apis/react/useLayoutEffect)
 
+* Even if your Effect was caused by an interaction (like a click), **the browser may repaint the screen before processing the state updates inside your Effect.** Usually, that's what you want. However, if you must block the browser from repainting the screen, you need to replace `useEffect` with [`useLayoutEffect`.](/apis/react/useLayoutEffect)
+
 * Effects **only run on the client.** They don't run during server rendering.
 
 ---

beta/src/content/apis/react/useEffectEvent.md

@@ -0,0 +1,24 @@
+---
+title: useEffectEvent
+---
+
+<Wip>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+See [`useEffectEvent` RFC](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md) for details.
+
+</Wip>
+
+
+<Intro>
+
+`useEffectEvent` is a React Hook that lets you extract non-reactive logic into an [Effect Event.](/learn/separating-events-from-effects#declaring-an-effect-event)
+
+```js
+const onSomething = useEffectEvent(callback)
+```
+
+</Intro>
+
+<InlineToc />