From 61bf23ab9ad345b93af508c438bd48dd679dc5fd Mon Sep 17 00:00:00 2001 From: Pranav Yadav Date: Tue, 21 Mar 2023 06:42:41 +0530 Subject: [PATCH] FIX: Various typos across codebase :) (#5767) --- src/components/MDX/CodeBlock/CodeBlock.tsx | 12 ++++++------ src/content/learn/escape-hatches.md | 2 +- src/content/learn/lifecycle-of-reactive-effects.md | 8 ++++---- src/content/learn/removing-effect-dependencies.md | 4 ++-- src/content/learn/reusing-logic-with-custom-hooks.md | 2 +- src/content/learn/separating-events-from-effects.md | 6 +++--- src/content/reference/react-dom/components/select.md | 2 +- src/content/reference/react-dom/createPortal.md | 2 +- .../react-dom/server/renderToPipeableStream.md | 2 +- .../react-dom/server/renderToReadableStream.md | 2 +- src/content/reference/react/useEffect.md | 2 +- 11 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx index 0e5edba3..3195bbe8 100644 --- a/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -10,7 +10,7 @@ import {css} from '@codemirror/lang-css'; import rangeParser from 'parse-numeric-range'; import {CustomTheme} from '../Sandpack/Themes'; -interface InlineHiglight { +interface InlineHighlight { step: number; line: number; startColumn: number; @@ -318,7 +318,7 @@ function getInlineDecorators( } const inlineHighlightLines = getInlineHighlights(meta, code); const inlineHighlightConfig = inlineHighlightLines.map( - (line: InlineHiglight) => ({ + (line: InlineHighlight) => ({ ...line, elementAttributes: {'data-step': `${line.step}`}, className: cn( @@ -371,15 +371,15 @@ function getHighlightLines(meta: string): number[] { * -> The meta is `{1-3,7} [[1, 1, 'count', [2, 4, 'setCount']] App.js active` */ function getInlineHighlights(meta: string, code: string) { - const INLINE_HIGHT_REGEX = /(\[\[.*\]\])/; - const parsedMeta = INLINE_HIGHT_REGEX.exec(meta); + const INLINE_HEIGHT_REGEX = /(\[\[.*\]\])/; + const parsedMeta = INLINE_HEIGHT_REGEX.exec(meta); if (!parsedMeta) { return []; } const lines = code.split('\n'); - const encodedHiglights = JSON.parse(parsedMeta[1]); - return encodedHiglights.map(([step, lineNo, substr, fromIndex]: any[]) => { + const encodedHighlights = JSON.parse(parsedMeta[1]); + return encodedHighlights.map(([step, lineNo, substr, fromIndex]: any[]) => { const line = lines[lineNo - 1]; let index = line.indexOf(substr); const lastIndex = line.lastIndexOf(substr); diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 73b7ad9c..6e4ecc87 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -314,7 +314,7 @@ Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to -This section describes an **experimental API that has not yet been released** in a stable vesion of React. +This section describes an **experimental API that has not yet been released** in a stable version of React. diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index d5ba509c..18729c04 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -1187,7 +1187,7 @@ body { -The problem with the original code was suppressing the dependency linter. If you remove the suppression, you'll see that this Effect depends on the `handleMove` function. This makes sense: `handleMove` is declared inside the component body, which makes it a reactive value. Every reactive value must be specified as a depedency, or it can potentially get stale over time! +The problem with the original code was suppressing the dependency linter. If you remove the suppression, you'll see that this Effect depends on the `handleMove` function. This makes sense: `handleMove` is declared inside the component body, which makes it a reactive value. Every reactive value must be specified as a dependency, or it can potentially get stale over time! The author of the original code has "lied" to React by saying that the Effect does not depend (`[]`) on any reactive values. This is why React did not re-synchronize the Effect after `canMove` has changed (and `handleMove` with it). Because React did not re-synchronize the Effect, the `handleMove` attached as a listener is the `handleMove` function created during the initial render. During the initial render, `canMove` was `true`, which is why `handleMove` from the initial render will forever see that value. @@ -1759,7 +1759,7 @@ async function fetchPlaces(planetId) { id: 'vishniac', name: 'Vishniac' }]); - } else throw Error('Uknown planet ID: ' + planetId); + } else throw Error('Unknown planet ID: ' + planetId); }, 1000); }); } @@ -1927,7 +1927,7 @@ async function fetchPlaces(planetId) { id: 'vishniac', name: 'Vishniac' }]); - } else throw Error('Uknown planet ID: ' + planetId); + } else throw Error('Unknown planet ID: ' + planetId); }, 1000); }); } @@ -2090,7 +2090,7 @@ async function fetchPlaces(planetId) { id: 'vishniac', name: 'Vishniac' }]); - } else throw Error('Uknown planet ID: ' + planetId); + } else throw Error('Unknown planet ID: ' + planetId); }, 1000); }); } diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 938c97b1..151b9c13 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -611,7 +611,7 @@ function ChatRoom({ roomId }) { -This section describes an **experimental API that has not yet been released** in a stable vesion of React. +This section describes an **experimental API that has not yet been released** in a stable version of React. @@ -1611,7 +1611,7 @@ label, button { display: block; margin-bottom: 5px; } Your Effect is re-running because it depends on the `options` object. Objects can be re-created unintentionally, you should try to avoid them as dependencies of your Effects whenever possible. -The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnnection`: +The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnection`: diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index a132fc5f..679a9bac 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -839,7 +839,7 @@ Every time your `ChatRoom` component re-renders, it passes the latest `roomId` a -This section describes an **experimental API that has not yet been released** in a stable vesion of React. +This section describes an **experimental API that has not yet been released** in a stable version of React. diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index de2d06db..116ccaee 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -402,7 +402,7 @@ You need a way to separate this non-reactive logic from the reactive Effect arou -This section describes an **experimental API that has not yet been released** in a stable vesion of React. +This section describes an **experimental API that has not yet been released** in a stable version of React. @@ -580,7 +580,7 @@ You can think of Effect Events as being very similar to event handlers. The main -This section describes an **experimental API that has not yet been released** in a stable vesion of React. +This section describes an **experimental API that has not yet been released** in a stable version of React. @@ -880,7 +880,7 @@ Read [Removing Effect Dependencies](/learn/removing-effect-dependencies) for oth -This section describes an **experimental API that has not yet been released** in a stable vesion of React. +This section describes an **experimental API that has not yet been released** in a stable version of React. diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md index 49101120..93ff56ac 100644 --- a/src/content/reference/react-dom/components/select.md +++ b/src/content/reference/react-dom/components/select.md @@ -48,7 +48,7 @@ If your `` props are relevant both for uncontrolled and controlled select boxs: +These `