diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index c447a2cdb..07271cef6 100644 --- a/.github/workflows/analyze.yml +++ b/.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 diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index bd73b6b4e..5a3047cfc 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.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: "" - - - name: Create Comment - uses: peter-evans/create-or-update-comment@v1.4.4 - 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/create-or-update-comment@v1.4.4 - 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 }} diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index e6bb995a4..0597642ae 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1463,7 +1463,10 @@ function VideoList({videos, emptyHeading}) { function SearchInput({value, onChange}) { const id = useId(); return ( -
+ e.preventDefault()}> diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 6e8585369..b1860ac0d 100644 --- a/src/content/community/conferences.md +++ b/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) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index eef915409..006f78a9a 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -10,7 +10,7 @@ title: createPortal ```js
- {createPortal(children, domNode)} + {createPortal(children, domNode, key?)}
``` @@ -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`. diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 8b95b1660..c1b605803 100644 --- a/src/content/reference/react/Component.md +++ b/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 ( +

Hello, {this.props.name}

+ ); + } +} +``` + + + +We recommend using [TypeScript](https://www.typescriptlang.org/) instead of checking prop types at runtime. + + + +--- + ### `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. diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 638450405..aa72b08a0 100644 --- a/src/content/reference/react/Fragment.md +++ b/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 `

` and `

` 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 `

` and `
` DOM nodes appear as siblings without wrappers around them: diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index f758af5a7..543c11125 100644 --- a/src/content/reference/react/useMemo.md +++ b/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 });