Merge pull request #329 from reactjs/sync-8ed23b1a

Sync with react.dev @ 8ed23b1

Author: Abolfazl Rezvani Naraqi

.github/workflows/analyze.yml

@@ -38,7 +38,7 @@ jobs:
       # Here's the first place where next-bundle-analysis' own script is used
       # This step pulls the raw bundle stats for the current bundle
       - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
+        run: npx -p nextjs-bundle-analysis@0.5.0 report
 
       - name: Upload bundle
         uses: actions/upload-artifact@v2

.github/workflows/analyze_comment.yml

@@ -47,26 +47,9 @@ jobs:
           pr_number=$(cat pr_number/pr_number)
           echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
 
-      - name: Find Comment
-        uses: peter-evans/find-comment@v1
-        if: success()
-        id: fc
-        with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
-
-      - name: Create Comment
-        uses: peter-evans/[email protected]
-        if: success() && steps.fc.outputs.comment-id == 0
-        with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-
-      - name: Update Comment
-        uses: peter-evans/[email protected]
-        if: success() && steps.fc.outputs.comment-id != 0
+      - name: Comment
+        uses: marocchino/sticky-pull-request-comment@v2
         with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          edit-mode: replace
+          header: next-bundle-analysis
+          number: ${{ steps.get-comment-body.outputs.pr-number }}
+          message: ${{ steps.get-comment-body.outputs.body }}

src/components/Layout/HomeContent.js

@@ -1463,7 +1463,10 @@ function VideoList({videos, emptyHeading}) {
 function SearchInput({value, onChange}) {
   const id = useId();
   return (
-    <form className="mb-3 py-1" data-hover="SearchInput">
+    <form
+      className="mb-3 py-1"
+      data-hover="SearchInput"
+      onSubmit={(e) => e.preventDefault()}>
       <label htmlFor={id} className="sr-only">
         Search
       </label>

src/content/community/conferences.md

@@ -10,11 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Miami 2023 {/*react-miami-2023*/}
-April 20 - 21, 2023. Miami, FL, USA
-
-[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
-
 ### Reactathon 2023 {/*reactathon-2023*/}
 May 2 - 3, 2023. San Francisco, CA, USA
 
@@ -92,6 +87,11 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
 
 ## Past Conferences {/*past-conferences*/}
 
+### React Miami 2023 {/*react-miami-2023*/}
+April 20 - 21, 2023. Miami, FL, USA
+
+[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
+
 ### React Day Berlin 2022 {/*react-day-berlin-2022*/}
 December 2, 2022. In-person in Berlin, Germany + remote (hybrid event)
 

src/content/reference/react-dom/createPortal.md

@@ -10,7 +10,7 @@ title: createPortal
 ```js
 <div>
   <SomeComponent />
-  {createPortal(children, domNode)}
+  {createPortal(children, domNode, key?)}
 </div>
 ```
 
@@ -22,7 +22,7 @@ title: createPortal
 
 ## Reference {/*reference*/}
 
-### `createPortal(children, domNode)` {/*createportal*/}
+### `createPortal(children, domNode, key?)` {/*createportal*/}
 
 To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered:
 
@@ -50,6 +50,8 @@ A portal only changes the physical placement of the DOM node. In every other way
 
 * `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated.
 
+* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists/#keeping-list-items-in-order-with-key)
+
 #### Returns {/*returns*/}
 
 `createPortal` returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children` inside the provided `domNode`.

src/content/reference/react/Component.md

@@ -978,6 +978,34 @@ Defining `defaultProps` in class components is similar to using [default values]
 
 ---
 
+### `static propTypes` {/*static-proptypes*/}
+
+You can define `static propTypes` together with the [`prop-types`](https://www.npmjs.com/package/prop-types) library to declare the types of the props accepted by your component. These types will be checked during rendering and in development only.
+
+```js
+import PropTypes from 'prop-types';
+
+class Greeting extends React.Component {
+  static propTypes = {
+    name: PropTypes.string
+  };
+
+  render() {
+    return (
+      <h1>Hello, {this.props.name}</h1>
+    );
+  }
+}
+```
+
+<Note>
+
+We recommend using [TypeScript](https://www.typescriptlang.org/) instead of checking prop types at runtime.
+
+</Note>
+
+---
+
 ### `static getDerivedStateFromError(error)` {/*static-getderivedstatefromerror*/}
 
 If you define `static getDerivedStateFromError`, React will call it when a child component (including distant children) throws an error during rendering. This lets you display an error message instead of clearing the UI.

src/content/reference/react/Fragment.md

@@ -54,7 +54,7 @@ function Post() {
 }
 ```
 
-Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<p>` DOM nodes appear as siblings without wrappers around them:
+Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<article>` DOM nodes appear as siblings without wrappers around them:
 
 <Sandpack>
 

src/content/reference/react/useMemo.md

@@ -1126,7 +1126,7 @@ To memoize a function with `useMemo`, your calculation function would have to re
 export default function Page({ productId, referrer }) {
   const handleSubmit = useMemo(() => {
     return (orderDetails) => {
-      post('/product/' + product.id + '/buy', {
+      post('/product/' + productId + '/buy', {
         referrer,
         orderDetails
       });
@@ -1142,7 +1142,7 @@ This looks clunky! **Memoizing functions is common enough that React has a built
 ```js {2,7}
 export default function Page({ productId, referrer }) {
   const handleSubmit = useCallback((orderDetails) => {
-    post('/product/' + product.id + '/buy', {
+    post('/product/' + productId + '/buy', {
       referrer,
       orderDetails
     });