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] [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 7dd4c78d..7c0b41df 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 2439d994..84b6ea89 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 7afa5f4d..b00146f4 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 c0ce4be5..20a8aef5 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 538aee93..e1dec478 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 a448614c..7d0cb3c0 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 873a75ea..733dc4fa 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 ac39c0a1..7297dcdb 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 19a1b209..69136525 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 6bc9959e..47d8bedc 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 49249acf..6a6287b6 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 59f2afe8..0500a7ed 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 74c6209a..bb8bb7e1 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 c16238e4..06d551e3 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 6afcb9c6..0a348870 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 3023551a..ca6b756a 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 a256a07a..4b486f9e 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 bbfe2978..368df714 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 c177da8c..f76818cb 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 a909a53e..ece3044a 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 2bf7de30..dc313e17 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://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with. - + The Babel `