Fix spelling errors and typos (#19138)

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,7 +12,7 @@
   6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
   7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
   8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
-  9. Run the [Flow](https://flowtype.org/) typechecks (`yarn flow`).
+  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
   10. If you haven't already, complete the CLA.
 
   Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html

fixtures/dom/src/components/fixtures/hydration/index.js

@@ -105,7 +105,7 @@ class Hydration extends React.Component {
             Version:
             <VersionPicker
               id="hydration_version"
-              name="hyration_version"
+              name="hydration_version"
               version={version}
               onChange={this.setVersion}
             />

fixtures/tracing/index.html

@@ -65,7 +65,7 @@
 
     <script>
       if (window.location.search.includes('puppeteer=true')) {
-        // Colocated calls to performance.now() often yield different values in Puppeteer.
+        // Collocated calls to performance.now() often yield different values in Puppeteer.
         // This causes the Scheduler API test to fail.
         // For the purposes of our automated release scripts,
         // Coerce tests to use Date.now() instead to reduce the chances of a false positive.

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -536,7 +536,7 @@ export default {
  * easy. For anonymous function expressions it is much harder. If you search for
  * `IsAnonymousFunctionDefinition()` in the ECMAScript spec you'll find places
  * where JS gives anonymous function expressions names. We roughly detect the
- * same AST nodes with some exceptions to better fit our usecase.
+ * same AST nodes with some exceptions to better fit our use case.
  */
 
 function getFunctionName(node) {

packages/react-devtools-core/README.md

@@ -21,7 +21,7 @@ Be sure to run this function *before* importing e.g. `react`, `react-dom`, `reac
 The `config` object may contain:
 * `host: string` (defaults to "localhost") - Websocket will connect to this host.
 * `port: number` (defaults to `8097`) - Websocket will connect to this port.
-* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.
+* `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided.
 * `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
 * `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
 
@@ -50,4 +50,4 @@ yarn start:backend
 Watch for changes made to the standalone UI entry point and rebuild:
 ```sh
 yarn start:standalone
-```
+```

packages/react-devtools-extensions/src/renderer.js

@@ -1,7 +1,7 @@
 /**
  * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.
  * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,
- * So this entry point (one of the web_accessible_resources) provcides a way to eagerly inject it.
+ * So this entry point (one of the web_accessible_resources) provides a way to eagerly inject it.
  * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.
  * The normal case (not a reload-and-profile) will not make use of this entry point though.
  *

packages/react-devtools-inline/README.md

@@ -85,7 +85,7 @@ initializeBackend(contentWindow);
 
 // React application can be injected into <iframe> at any time now...
 // Note that this would need to be done via <script> tag injection,
-// as setting the src of the <iframe> would load a new page (withou the injected backend).
+// as setting the src of the <iframe> would load a new page (without the injected backend).
 
 // Initialize DevTools UI to listen to the hook we just installed.
 // This returns a React component we can render anywhere in the parent window.
@@ -107,7 +107,7 @@ Sandboxed `iframe`s are also supported but require more complex initialization.
 ```js
 import { activate, initialize } from "react-devtools-inline/backend";
 
-// The DevTooks hook needs to be installed before React is even required!
+// The DevTools hook needs to be installed before React is even required!
 // The safest way to do this is probably to install it in a separate script tag.
 initialize(window);
 
@@ -177,4 +177,4 @@ Once the above packages have been built or downloaded, you can watch for changes
 yarn start
 ```
 
-To test package changes, refer to the [`react-devtools-shell` README](https://github.com/facebook/react/blob/master/packages/react-devtools-shell/README.md).
+To test package changes, refer to the [`react-devtools-shell` README](https://github.com/facebook/react/blob/master/packages/react-devtools-shell/README.md).

packages/react-devtools-shared/src/__tests__/setupTests.js

@@ -21,7 +21,7 @@ env.beforeEach(() => {
   // it's too late for a test to mock the clipboard-js modules.
   jest.mock('clipboard-js', () => ({copy: global.mockClipboardCopy}));
 
-  // These files should be required (and re-reuired) before each test,
+  // These files should be required (and re-required) before each test,
   // rather than imported at the head of the module.
   // That's because we reset modules between tests,
   // which disconnects the DevTool's cache from the current dispatcher ref.

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -867,19 +867,19 @@ describe('Store', () => {
     }
 
     const MyComponent = (props, ref) => null;
-    const FowardRefComponent = React.forwardRef(MyComponent);
+    const ForwardRefComponent = React.forwardRef(MyComponent);
     const MyComponent2 = (props, ref) => null;
-    const FowardRefComponentWithAnonymousFunction = React.forwardRef(() => (
+    const ForwardRefComponentWithAnonymousFunction = React.forwardRef(() => (
       <MyComponent2 />
     ));
     const MyComponent3 = (props, ref) => null;
-    const FowardRefComponentWithCustomDisplayName = React.forwardRef(
+    const ForwardRefComponentWithCustomDisplayName = React.forwardRef(
       MyComponent3,
     );
-    FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
+    ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
     const MyComponent4 = (props, ref) => null;
     const MemoComponent = React.memo(MyComponent4);
-    const MemoForwardRefComponent = React.memo(FowardRefComponent);
+    const MemoForwardRefComponent = React.memo(ForwardRefComponent);
     const MyComponent5 = (props, ref) => null;
     const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
 
@@ -896,9 +896,9 @@ describe('Store', () => {
     const App = () => (
       <React.Fragment>
         <MyComponent />
-        <FowardRefComponent />
+        <ForwardRefComponent />
-        <FowardRefComponentWithAnonymousFunction />
+        <ForwardRefComponentWithAnonymousFunction />
-        <FowardRefComponentWithCustomDisplayName />
+        <ForwardRefComponentWithCustomDisplayName />
         <MemoComponent />
         <MemoForwardRefComponent />
         <React.Suspense fallback="Loading...">

packages/react-devtools-shared/src/__tests__/utils.js

@@ -41,7 +41,7 @@ export async function actAsync(
   const {act: actTestRenderer} = require('react-test-renderer');
   const {act: actDOM} = require('react-dom/test-utils');
 
-  // $FlowFixMe Flow doens't know about "await act()" yet
+  // $FlowFixMe Flow doesn't know about "await act()" yet
   await actDOM(async () => {
     await actTestRenderer(async () => {
       await cb();
@@ -50,7 +50,7 @@ export async function actAsync(
 
   if (recursivelyFlush) {
     while (jest.getTimerCount() > 0) {
-      // $FlowFixMe Flow doens't know about "await act()" yet
+      // $FlowFixMe Flow doesn't know about "await act()" yet
       await actDOM(async () => {
         await actTestRenderer(async () => {
           jest.runAllTimers();

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -586,7 +586,7 @@ export function attach(
     });
   }
 
-  function createisPathAllowed(key: string) {
+  function createIsPathAllowed(key: string) {
     // This function helps prevent previously-inspected paths from being dehydrated in updates.
     // This is important to avoid a bad user experience where expanded toggles collapse on update.
     return function isPathAllowed(path: Array<string | number>): boolean {
@@ -706,15 +706,15 @@ export function attach(
 
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
-      createisPathAllowed('context'),
+      createIsPathAllowed('context'),
     );
     inspectedElement.props = cleanForBridge(
       inspectedElement.props,
-      createisPathAllowed('props'),
+      createIsPathAllowed('props'),
     );
     inspectedElement.state = cleanForBridge(
       inspectedElement.state,
-      createisPathAllowed('state'),
+      createIsPathAllowed('state'),
     );
 
     return {
@@ -800,7 +800,7 @@ export function attach(
       // List of owners
       owners,
 
-      // Location of component in source coude.
+      // Location of component in source code.
       source,
 
       rootType: null,

packages/react-devtools-shared/src/backend/renderer.js

@@ -111,7 +111,7 @@ type ReactTypeOfSideEffectType = {|
   Placement: number,
 |};
 
-// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
   typeof performance === 'object' && typeof performance.now === 'function'
     ? () => performance.now()
@@ -532,7 +532,7 @@ export function attach(
 
   // If necessary, we can revisit optimizing this operation.
   // For example, we could add a new recursive unmount tree operation.
-  // The unmount operations are already significantly smaller than mount opreations though.
+  // The unmount operations are already significantly smaller than mount operations though.
   // This is something to keep in mind for later.
   function updateComponentFilters(componentFilters: Array<ComponentFilter>) {
     if (isProfiling) {
@@ -551,7 +551,7 @@ export function attach(
 
     applyComponentFilters(componentFilters);
 
-    // Reset psuedo counters so that new path selections will be persisted.
+    // Reset pseudo counters so that new path selections will be persisted.
     rootDisplayNameCounter.clear();
 
     // Recursively re-mount all roots with new filter criteria applied.
@@ -810,7 +810,7 @@ export function attach(
 
   // Record all contexts at the time profiling is started.
   // Fibers only store the current context value,
-  // so we need to track them separatenly in order to determine changed keys.
+  // so we need to track them separately in order to determine changed keys.
   function crawlToInitializeContextsMap(fiber: Fiber) {
     updateContextsForFiber(fiber);
     let current = fiber.child;
@@ -961,7 +961,7 @@ export function attach(
       // (1) an initial tree snapshot and
       // (2) the operations array for each commit
       // Because of this, it's important that the operations and metadata arrays align,
-      // So it's important not to ommit even empty operations while profiing is active.
+      // So it's important not to omit even empty operations while profiling is active.
       if (!isProfiling) {
         return;
       }
@@ -1156,7 +1156,7 @@ export function attach(
     }
     const id = getFiberID(primaryFiber);
     if (isRoot) {
-      // Roots must be removed only after all children (pending and simultated) have been removed.
+      // Roots must be removed only after all children (pending and simulated) have been removed.
       // So we track it separately.
       pendingUnmountedRootID = id;
     } else if (!shouldFilterFiber(fiber)) {
@@ -1320,7 +1320,7 @@ export function attach(
       const {alternate} = fiber;
 
       // It's important to update treeBaseDuration even if the current Fiber did not render,
-      // becuase it's possible that one of its descednants did.
+      // because it's possible that one of its descendants did.
       if (
         alternate == null ||
         treeBaseDuration !== alternate.treeBaseDuration
@@ -1382,7 +1382,7 @@ export function attach(
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
     const nextChildren: Array<number> = [];
 
-    // This is a naive implimentation that shallowly recurses children.
+    // This is a naive implementation that shallowly recourses children.
     // We might want to revisit this if it proves to be too inefficient.
     let child = childSet;
     while (child !== null) {
@@ -1476,7 +1476,7 @@ export function attach(
     // Suspense components only have a non-null memoizedState if they're timed-out.
     const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;
     const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;
-    // The logic below is inspired by the codepaths in updateSuspenseComponent()
+    // The logic below is inspired by the code paths in updateSuspenseComponent()
     // inside ReactFiberBeginWork in the React source code.
     if (prevDidTimeout && nextDidTimeOut) {
       // Fallback -> Fallback:
@@ -1540,7 +1540,7 @@ export function attach(
       }
     } else {
       // Common case: Primary -> Primary.
-      // This is the same codepath as for non-Suspense fibers.
+      // This is the same code path as for non-Suspense fibers.
       if (nextFiber.child !== prevFiber.child) {
         // If the first child is different, we need to traverse them.
         // Each next child will be either a new child (mount) or an alternate (update).
@@ -1596,7 +1596,7 @@ export function attach(
       } else {
         if (traceUpdatesEnabled) {
           // If we're tracing updates and we've bailed out before reaching a host node,
-          // we should fall back to recursively marking the nearest host descendates for highlight.
+          // we should fall back to recursively marking the nearest host descendants for highlight.
           if (traceNearestHostComponentUpdate) {
             const hostFibers = findAllCurrentHostFibers(
               getFiberID(getPrimaryFiber(nextFiber)),
@@ -2347,7 +2347,7 @@ export function attach(
       // List of owners
       owners,
 
-      // Location of component in source coude.
+      // Location of component in source code.
       source: _debugSource || null,
 
       rootType,
@@ -2380,7 +2380,7 @@ export function attach(
     });
   }
 
-  function createisPathAllowed(
+  function createIsPathAllowed(
     key: string | null,
     secondaryCategory: 'hooks' | null,
   ) {
@@ -2528,7 +2528,7 @@ export function attach(
               ((mostRecentlyInspectedElement: any): InspectedElement),
               path,
             ),
-            createisPathAllowed(null, secondaryCategory),
+            createIsPathAllowed(null, secondaryCategory),
             path,
           ),
         };
@@ -2564,7 +2564,7 @@ export function attach(
 
       // Any time an inspected element has an update,
       // we should update the selected $r value as wel.
-      // Do this before dehyration (cleanForBridge).
+      // Do this before dehydration (cleanForBridge).
       updateSelectedElement(mostRecentlyInspectedElement);
 
       // Clone before cleaning so that we preserve the full data.
@@ -2573,19 +2573,19 @@ export function attach(
       const cleanedInspectedElement = {...mostRecentlyInspectedElement};
       cleanedInspectedElement.context = cleanForBridge(
         cleanedInspectedElement.context,
-        createisPathAllowed('context', null),
+        createIsPathAllowed('context', null),
       );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
-        createisPathAllowed('hooks', 'hooks'),
+        createIsPathAllowed('hooks', 'hooks'),
       );
       cleanedInspectedElement.props = cleanForBridge(
         cleanedInspectedElement.props,
-        createisPathAllowed('props', null),
+        createIsPathAllowed('props', null),
       );
       cleanedInspectedElement.state = cleanForBridge(
         cleanedInspectedElement.state,
-        createisPathAllowed('state', null),
+        createIsPathAllowed('state', null),
       );
 
       return {
@@ -2678,7 +2678,7 @@ export function attach(
   }
 
   function setInContext(id: number, path: Array<string | number>, value: any) {
-    // To simplify hydration and display of primative context values (e.g. number, string)
+    // To simplify hydration and display of primitive context values (e.g. number, string)
     // the inspectElement() method wraps context in a {value: ...} object.
     // We need to remove the first part of the path (the "value") before continuing.
     path = path.slice(1);
@@ -2843,7 +2843,7 @@ export function attach(
       if (shouldRecordChangeDescriptions) {
         // Record all contexts at the time profiling is started.
         // Fibers only store the current context value,
-        // so we need to track them separatenly in order to determine changed keys.
+        // so we need to track them separately in order to determine changed keys.
         crawlToInitializeContextsMap(root.current);
       }
     });

packages/react-devtools-shared/src/backend/types.js

@@ -190,7 +190,7 @@ export type InspectedElement = {|
   // Does the current renderer support editable function props?
   canEditFunctionProps: boolean,
 
-  // Is this Suspense, and can its value be overriden now?
+  // Is this Suspense, and can its value be overridden now?
   canToggleSuspense: boolean,
 
   // Can view component source location.

packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js

@@ -24,7 +24,7 @@ const MAX_DISPLAY_DURATION = 3000;
 // How long should a rect be considered valid for?
 const REMEASUREMENT_AFTER_DURATION = 250;
 
-// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
   typeof performance === 'object' && typeof performance.now === 'function'
     ? () => performance.now()

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js

@@ -16,7 +16,7 @@ import styles from './ContextMenu.css';
 
 import type {RegistryContextType} from './Contexts';
 
-function respositionToFit(element: HTMLElement, pageX: number, pageY: number) {
+function repositionToFit(element: HTMLElement, pageX: number, pageY: number) {
   const ownerWindow = element.ownerDocument.defaultView;
   if (element !== null) {
     if (pageY + element.offsetHeight >= ownerWindow.innerHeight) {
@@ -108,7 +108,7 @@ export default function ContextMenu({children, id}: Props) {
       const ownerWindow = ownerDocument.defaultView;
       ownerWindow.addEventListener('resize', hide);
 
-      respositionToFit(menu, state.pageX, state.pageY);
+      repositionToFit(menu, state.pageX, state.pageY);
 
       return () => {
         ownerDocument.removeEventListener('mousedown', hideUnlessContains);

packages/react-devtools-shared/src/devtools/store.js

@@ -370,7 +370,7 @@ export default class Store extends EventEmitter<{|
       return null;
     }
 
-    // Find wich root this element is in...
+    // Find which root this element is in...
     let rootID;
     let root;
     let rootWeight = 0;

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -188,7 +188,7 @@ function InspectedElementContextController({children}: Props) {
 
               resource.write(element, inspectedElement);
 
-              // Schedule update with React if the curently-selected element has been invalidated.
+              // Schedule update with React if the currently-selected element has been invalidated.
               if (id === selectedElementID) {
                 setCurrentlyInspectedElement(inspectedElement);
               }
@@ -263,7 +263,7 @@ function InspectedElementContextController({children}: Props) {
             } else {
               resource.write(element, inspectedElement);
 
-              // Schedule update with React if the curently-selected element has been invalidated.
+              // Schedule update with React if the currently-selected element has been invalidated.
               if (id === selectedElementID) {
                 setCurrentlyInspectedElement(inspectedElement);
               }

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js

@@ -131,7 +131,7 @@ export default function OwnerStack() {
 
   useLayoutEffect(() => {
     // If we're already overflowing, then we don't need to re-measure items.
-    // That's because once the owners stack is open, it can only get larger (by driling in).
+    // That's because once the owners stack is open, it can only get larger (by drilling in).
     // A totally new stack can only be reached by exiting this mode and re-entering it.
     if (elementsBarRef.current === null || isOverflowing) {
       return () => {};

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js

@@ -155,7 +155,7 @@ export default function SelectedElement(_: Props) {
     } else {
       const nearestSuspenseElementID = nearestSuspenseElement.id;
 
-      // If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.
+      // If we're suspending from an arbitrary (non-Suspense) component, select the nearest Suspense element in the Tree.
       // This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.
       if (nearestSuspenseElement !== element) {
         dispatch({
@@ -248,7 +248,7 @@ export default function SelectedElement(_: Props) {
       {inspectedElement !== null && (
         <InspectedElementView
           key={
-            inspectedElementID /* Force reset when seleted Element changes */
+            inspectedElementID /* Force reset when selected Element changes */
           }
           copyInspectedElementPath={copyInspectedElementPath}
           element={element}
@@ -596,13 +596,13 @@ function CannotSuspendWarningMessage() {
       filter.isEnabled,
   );
 
-  // Has the user filted out Suspense nodes from the tree?
+  // Has the user filtered out Suspense nodes from the tree?
   // If so, the selected element might actually be in a Suspense tree after all.
   if (areSuspenseElementsHidden) {
     return (
       <div className={styles.CannotSuspendWarningMessage}>
         Suspended state cannot be toggled while Suspense components are hidden.
-        Disable the filter and try agan.
+        Disable the filter and try again.
       </div>
     );
   } else {

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -432,7 +432,7 @@ function InnerElementType({children, style, ...rest}) {
 
   // This ref tracks the current indentation size.
   // We decrease indentation to fit wider/deeper trees.
-  // We indentionally do not increase it again afterward, to avoid the perception of content "jumping"
+  // We intentionally do not increase it again afterward, to avoid the perception of content "jumping"
   // e.g. clicking to toggle/collapse a row might otherwise jump horizontally beneath your cursor,
   // e.g. scrolling a wide row off screen could cause narrower rows to jump to the right some.
   //

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -13,11 +13,11 @@
 //
 // Changes to search state may impact tree state.
 // For example, updating the selected search result also updates the tree's selected value.
-// Search does not fundamanetally change the tree though.
+// Search does not fundamentally change the tree though.
 // It is also possible to update the selected tree value independently.
 //
 // Changes to owners state mask search and tree values.
-// When owners statck is not empty, search is temporarily disabnled,
+// When owners stack is not empty, search is temporarily disabled,
 // and tree values (e.g. num elements, selected element) are masked.
 // Both tree and search values are restored when the owners stack is cleared.
 //

packages/react-devtools-shared/src/devtools/views/Components/types.js

@@ -17,7 +17,7 @@ import type {ElementType} from 'react-devtools-shared/src/types';
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.
 // Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
-// Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
+// Elements are updated on a push basis– meaning the backend pushes updates to the frontend when needed.
 export type Element = {|
   id: number,
   parentID: number,
@@ -65,7 +65,7 @@ export type InspectedElement = {|
   // Does the current renderer support editable function props?
   canEditFunctionProps: boolean,
 
-  // Is this Suspense, and can its value be overriden now?
+  // Is this Suspense, and can its value be overridden now?
   canToggleSuspense: boolean,
 
   // Can view component source location.

packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js

@@ -81,7 +81,7 @@ function getMousePosition(
   mouseEvent: SyntheticMouseEvent<*>,
 ) {
   if (relativeContainer !== null) {
-    // Positon within the nearest position:relative container.
+    // Position within the nearest position:relative container.
     let targetContainer = relativeContainer;
     while (targetContainer.parentElement != null) {
       if (targetContainer.style.position === 'relative') {

packages/react-devtools-shared/src/devtools/views/Profiler/types.js

@@ -133,7 +133,7 @@ export type ProfilingDataForRootExport = {|
   snapshots: Array<[number, SnapshotNode]>,
 |};
 
-// Serializable vefrsion of ProfilingDataFrontend data.
+// Serializable version of ProfilingDataFrontend data.
 export type ProfilingDataExport = {|
   version: 4,
   dataForRoots: Array<ProfilingDataForRootExport>,

packages/react-devtools-shell/src/app/ElementTypes/index.js

@@ -36,16 +36,16 @@ function FunctionComponent() {
 
 const MemoFunctionComponent = memo(FunctionComponent);
 
-const FowardRefComponentWithAnonymousFunction = forwardRef((props, ref) => (
+const ForwardRefComponentWithAnonymousFunction = forwardRef((props, ref) => (
   <ClassComponent ref={ref} {...props} />
 ));
 const ForwardRefComponent = forwardRef(function NamedInnerFunction(props, ref) {
   return <ClassComponent ref={ref} {...props} />;
 });
-const FowardRefComponentWithCustomDisplayName = forwardRef((props, ref) => (
+const ForwardRefComponentWithCustomDisplayName = forwardRef((props, ref) => (
   <ClassComponent ref={ref} {...props} />
 ));
-FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
+ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
 
 const LazyComponent = lazy(() =>
   Promise.resolve({
@@ -66,8 +66,8 @@ export default function ElementTypes() {
             <FunctionComponent />
             <MemoFunctionComponent />
             <ForwardRefComponent />
-            <FowardRefComponentWithAnonymousFunction />
+            <ForwardRefComponentWithAnonymousFunction />
-            <FowardRefComponentWithCustomDisplayName />
+            <ForwardRefComponentWithCustomDisplayName />
             <LazyComponent />
           </Suspense>
         </StrictMode>

packages/react-devtools-shell/src/app/Hydration/index.js

@@ -11,7 +11,7 @@ import * as React from 'react';
 import {Fragment, useDebugValue, useState} from 'react';
 
 const div = document.createElement('div');
-const exmapleFunction = () => {};
+const exampleFunction = () => {};
 const typedArray = new Uint8Array(3);
 typedArray[0] = 1;
 typedArray[1] = 2;
@@ -112,7 +112,7 @@ export default function Hydration() {
       <h1>Hydration</h1>
       <DehydratableProps
         html_element={div}
-        fn={exmapleFunction}
+        fn={exampleFunction}
         symbol={Symbol('symbol')}
         react_element={<span />}
         array_buffer={typedArray.buffer}

packages/react-devtools-shell/src/app/console.js

@@ -13,7 +13,7 @@ function ignoreStrings(
 ): void {
   // HACKY In the test harness, DevTools overrides the parent window's console.
   // Our test app code uses the iframe's console though.
-  // To simulate a more accurate end-ot-end ienvironment,
+  // To simulate a more accurate end-to-end environment,
   // the shell's console patching should pass through to the parent override methods.
   const originalMethod = window.parent.console[methodName];
 

packages/react-dom/src/__tests__/ReactDOMFiber-test.js

@@ -1306,7 +1306,7 @@ describe('ReactDOMFiber', () => {
 
     ReactDOM.render(<NewApp />, container);
 
-    // Calling focus again will flush previously scheduled discerete work for the old root-
+    // Calling focus again will flush previously scheduled discrete work for the old root-
     // but this should not clear out the newly mounted app.
     ref.current.focus();
 

packages/react-dom/src/__tests__/ReactDOMSelect-test.js

@@ -507,7 +507,7 @@ describe('ReactDOMSelect', () => {
     expect(markup).not.toContain('<option selected="" value="monkey"');
   });
 
-  it('should not control defaultValue if readding options', () => {
+  it('should not control defaultValue if re-adding options', () => {
     const container = document.createElement('div');
 
     const node = ReactDOM.render(

packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js

@@ -1042,7 +1042,7 @@ describe('ReactDOMServerHooks', () => {
 
           return (
             <div>
-              <div aria-labelledby={id}>Chid One</div>
+              <div aria-labelledby={id}>Child One</div>
               <ChildTwo id={id} />
               <div aria-labelledby={idTwo}>Child Three</div>
               <div id={idTwo}>Child Four</div>
@@ -1336,7 +1336,7 @@ describe('ReactDOMServerHooks', () => {
         ).not.toBeNull();
       });
 
-      it('useOpaqueIdentifierr: flushSync', async () => {
+      it('useOpaqueIdentifier: flushSync', async () => {
         let _setShow;
         function App() {
           const id = useOpaqueIdentifier();

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

@@ -223,7 +223,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(button.innerHTML).toBe('5');
       });
 
-      it("should keep flushing effects until the're done", () => {
+      it("should keep flushing effects until they're done", () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
           React.useEffect(() => {

packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js

@@ -100,7 +100,7 @@ it('flushes effects on every call', () => {
   expect(button.innerHTML).toEqual('5');
 });
 
-it("should keep flushing effects until the're done", () => {
+it("should keep flushing effects until they're done", () => {
   function App() {
     const [ctr, setCtr] = React.useState(0);
     React.useEffect(() => {

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -26,7 +26,7 @@ describe('ReactUpdates', () => {
   });
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>
@@ -1686,7 +1686,7 @@ describe('ReactUpdates', () => {
   }
 
   if (__DEV__) {
-    it('should properly trace interactions within batched udpates', () => {
+    it('should properly trace interactions within batched updates', () => {
       const SchedulerTracing = require('scheduler/tracing');
 
       let expectedInteraction;

packages/react-dom/src/client/ReactDOMEventHandle.js

@@ -209,7 +209,7 @@ export function createEventHandle(
           invariant(
             false,
             'ReactDOM.createEventHandle: setListener called on an invalid ' +
-              'target. Provide a vaid EventTarget or an element managed by React.',
+              'target. Provide a valid EventTarget or an element managed by React.',
           );
         }
         let listener = listeners.get(target);

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -951,7 +951,7 @@ export function didNotFindHydratableContainerSuspenseInstance(
   parentContainer: Container,
 ) {
   if (__DEV__) {
-    // TODO: warnForInsertedHydratedSupsense(parentContainer);
+    // TODO: warnForInsertedHydratedSuspense(parentContainer);
   }
 }
 

packages/react-dom/src/client/ReactDOMOption.js

@@ -28,7 +28,7 @@ function flattenChildren(children) {
     content += (child: any);
     // Note: we don't warn about invalid children here.
     // Instead, this is done separately below so that
-    // it happens during the hydration codepath too.
+    // it happens during the hydration code path too.
   });
 
   return content;
@@ -40,7 +40,7 @@ function flattenChildren(children) {
 
 export function validateProps(element: Element, props: Object) {
   if (__DEV__) {
-    // This mirrors the codepath above, but runs for hydration too.
+    // This mirrors the code path above, but runs for hydration too.
     // Warn about invalid children here so that client and hydration are consistent.
     // TODO: this seems like it could cause a DEV-only throw for hydration
     // if children contains a non-element object. We should try to avoid that.

packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js

@@ -704,7 +704,7 @@ describe('DOMModernPluginEventSystem', () => {
         it('native stopPropagation on click events between portals', () => {
           const buttonRef = React.createRef();
           const divRef = React.createRef();
-          const middelDivRef = React.createRef();
+          const middleDivRef = React.createRef();
           const log = [];
           const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
           const onClickCapture = jest.fn(e =>
@@ -716,7 +716,7 @@ describe('DOMModernPluginEventSystem', () => {
 
           function Child() {
             return (
-              <div ref={middelDivRef}>
+              <div ref={middleDivRef}>
                 <div
                   ref={divRef}
                   onClick={onClick}
@@ -731,7 +731,7 @@ describe('DOMModernPluginEventSystem', () => {
             React.useLayoutEffect(() => {
               // This should prevent the portalElement listeners from
               // capturing the events in the bubble phase.
-              middelDivRef.current.addEventListener('click', e => {
+              middleDivRef.current.addEventListener('click', e => {
                 e.stopPropagation();
               });
             });
@@ -920,7 +920,7 @@ describe('DOMModernPluginEventSystem', () => {
         it('native stopPropagation on focus events between portals', () => {
           const buttonRef = React.createRef();
           const divRef = React.createRef();
-          const middelDivRef = React.createRef();
+          const middleDivRef = React.createRef();
           const log = [];
           const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));
           const onFocusCapture = jest.fn(e =>
@@ -932,7 +932,7 @@ describe('DOMModernPluginEventSystem', () => {
 
           function Child() {
             return (
-              <div ref={middelDivRef}>
+              <div ref={middleDivRef}>
                 <div
                   ref={divRef}
                   onClick={onFocus}
@@ -948,7 +948,7 @@ describe('DOMModernPluginEventSystem', () => {
             React.useLayoutEffect(() => {
               // This should prevent the portalElement listeners from
               // capturing the events in the bubble phase.
-              middelDivRef.current.addEventListener('click', e => {
+              middleDivRef.current.addEventListener('click', e => {
                 e.stopPropagation();
               });
             });
@@ -1662,7 +1662,7 @@ describe('DOMModernPluginEventSystem', () => {
           });
 
           // @gate experimental
-          it('should correctly handle stopPropagation corrrectly for target events', () => {
+          it('should correctly handle stopPropagation correctly for target events', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
             const clickEvent = jest.fn();
@@ -1695,12 +1695,12 @@ describe('DOMModernPluginEventSystem', () => {
           });
 
           // @gate experimental
-          it('should correctly handle stopPropagation corrrectly for many target events', () => {
+          it('should correctly handle stopPropagation correctly for many target events', () => {
             const buttonRef = React.createRef();
-            const targetListerner1 = jest.fn(e => e.stopPropagation());
+            const targetListener1 = jest.fn(e => e.stopPropagation());
-            const targetListerner2 = jest.fn(e => e.stopPropagation());
+            const targetListener2 = jest.fn(e => e.stopPropagation());
-            const targetListerner3 = jest.fn(e => e.stopPropagation());
+            const targetListener3 = jest.fn(e => e.stopPropagation());
-            const targetListerner4 = jest.fn(e => e.stopPropagation());
+            const targetListener4 = jest.fn(e => e.stopPropagation());
             const click1 = ReactDOM.unstable_createEventHandle('click');
             const click2 = ReactDOM.unstable_createEventHandle('click');
             const click3 = ReactDOM.unstable_createEventHandle('click');
@@ -1708,10 +1708,10 @@ describe('DOMModernPluginEventSystem', () => {
 
             function Test() {
               React.useEffect(() => {
-                click1.setListener(buttonRef.current, targetListerner1);
+                click1.setListener(buttonRef.current, targetListener1);
-                click2.setListener(buttonRef.current, targetListerner2);
+                click2.setListener(buttonRef.current, targetListener2);
-                click3.setListener(buttonRef.current, targetListerner3);
+                click3.setListener(buttonRef.current, targetListener3);
-                click4.setListener(buttonRef.current, targetListerner4);
+                click4.setListener(buttonRef.current, targetListener4);
               });
 
               return <button ref={buttonRef}>Click me!</button>;
@@ -1722,19 +1722,19 @@ describe('DOMModernPluginEventSystem', () => {
 
             const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
-            expect(targetListerner1).toHaveBeenCalledTimes(1);
+            expect(targetListener1).toHaveBeenCalledTimes(1);
-            expect(targetListerner2).toHaveBeenCalledTimes(1);
+            expect(targetListener2).toHaveBeenCalledTimes(1);
-            expect(targetListerner3).toHaveBeenCalledTimes(1);
+            expect(targetListener3).toHaveBeenCalledTimes(1);
-            expect(targetListerner4).toHaveBeenCalledTimes(1);
+            expect(targetListener4).toHaveBeenCalledTimes(1);
           });
 
           // @gate experimental
           it('should correctly handle stopPropagation for mixed capture/bubbling target listeners', () => {
             const buttonRef = React.createRef();
-            const targetListerner1 = jest.fn(e => e.stopPropagation());
+            const targetListener1 = jest.fn(e => e.stopPropagation());
-            const targetListerner2 = jest.fn(e => e.stopPropagation());
+            const targetListener2 = jest.fn(e => e.stopPropagation());
-            const targetListerner3 = jest.fn(e => e.stopPropagation());
+            const targetListener3 = jest.fn(e => e.stopPropagation());
-            const targetListerner4 = jest.fn(e => e.stopPropagation());
+            const targetListener4 = jest.fn(e => e.stopPropagation());
             const click1 = ReactDOM.unstable_createEventHandle('click', {
               capture: true,
             });
@@ -1746,10 +1746,10 @@ describe('DOMModernPluginEventSystem', () => {
 
             function Test() {
               React.useEffect(() => {
-                click1.setListener(buttonRef.current, targetListerner1);
+                click1.setListener(buttonRef.current, targetListener1);
-                click2.setListener(buttonRef.current, targetListerner2);
+                click2.setListener(buttonRef.current, targetListener2);
-                click3.setListener(buttonRef.current, targetListerner3);
+                click3.setListener(buttonRef.current, targetListener3);
-                click4.setListener(buttonRef.current, targetListerner4);
+                click4.setListener(buttonRef.current, targetListener4);
               });
 
               return <button ref={buttonRef}>Click me!</button>;
@@ -1760,10 +1760,10 @@ describe('DOMModernPluginEventSystem', () => {
 
             const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
-            expect(targetListerner1).toHaveBeenCalledTimes(1);
+            expect(targetListener1).toHaveBeenCalledTimes(1);
-            expect(targetListerner2).toHaveBeenCalledTimes(1);
+            expect(targetListener2).toHaveBeenCalledTimes(1);
-            expect(targetListerner3).toHaveBeenCalledTimes(0);
+            expect(targetListener3).toHaveBeenCalledTimes(0);
-            expect(targetListerner4).toHaveBeenCalledTimes(0);
+            expect(targetListener4).toHaveBeenCalledTimes(0);
           });
 
           // @gate experimental
@@ -2035,10 +2035,10 @@ describe('DOMModernPluginEventSystem', () => {
           // @gate experimental
           it('should correctly handle stopPropagation for mixed listeners', () => {
             const buttonRef = React.createRef();
-            const rootListerner1 = jest.fn(e => e.stopPropagation());
+            const rootListener1 = jest.fn(e => e.stopPropagation());
-            const rootListerner2 = jest.fn();
+            const rootListener2 = jest.fn();
-            const targetListerner1 = jest.fn();
+            const targetListener1 = jest.fn();
-            const targetListerner2 = jest.fn();
+            const targetListener2 = jest.fn();
             const click1 = ReactDOM.unstable_createEventHandle('click', {
               capture: true,
             });
@@ -2050,10 +2050,10 @@ describe('DOMModernPluginEventSystem', () => {
 
             function Test() {
               React.useEffect(() => {
-                click1.setListener(window, rootListerner1);
+                click1.setListener(window, rootListener1);
-                click2.setListener(buttonRef.current, targetListerner1);
+                click2.setListener(buttonRef.current, targetListener1);
-                click3.setListener(window, rootListerner2);
+                click3.setListener(window, rootListener2);
-                click4.setListener(buttonRef.current, targetListerner2);
+                click4.setListener(buttonRef.current, targetListener2);
 
                 return () => {
                   click1.setListener(window, null);
@@ -2069,19 +2069,19 @@ describe('DOMModernPluginEventSystem', () => {
 
             const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
-            expect(rootListerner1).toHaveBeenCalledTimes(1);
+            expect(rootListener1).toHaveBeenCalledTimes(1);
-            expect(targetListerner1).toHaveBeenCalledTimes(0);
+            expect(targetListener1).toHaveBeenCalledTimes(0);
-            expect(targetListerner2).toHaveBeenCalledTimes(0);
+            expect(targetListener2).toHaveBeenCalledTimes(0);
-            expect(rootListerner2).toHaveBeenCalledTimes(0);
+            expect(rootListener2).toHaveBeenCalledTimes(0);
           });
 
           // @gate experimental
           it('should correctly handle stopPropagation for delegated listeners', () => {
             const buttonRef = React.createRef();
-            const rootListerner1 = jest.fn(e => e.stopPropagation());
+            const rootListener1 = jest.fn(e => e.stopPropagation());
-            const rootListerner2 = jest.fn();
+            const rootListener2 = jest.fn();
-            const rootListerner3 = jest.fn(e => e.stopPropagation());
+            const rootListener3 = jest.fn(e => e.stopPropagation());
-            const rootListerner4 = jest.fn();
+            const rootListener4 = jest.fn();
             const click1 = ReactDOM.unstable_createEventHandle('click', {
               capture: true,
             });
@@ -2093,10 +2093,10 @@ describe('DOMModernPluginEventSystem', () => {
 
             function Test() {
               React.useEffect(() => {
-                click1.setListener(window, rootListerner1);
+                click1.setListener(window, rootListener1);
-                click2.setListener(window, rootListerner2);
+                click2.setListener(window, rootListener2);
-                click3.setListener(window, rootListerner3);
+                click3.setListener(window, rootListener3);
-                click4.setListener(window, rootListerner4);
+                click4.setListener(window, rootListener4);
 
                 return () => {
                   click1.setListener(window, null);
@@ -2115,10 +2115,10 @@ describe('DOMModernPluginEventSystem', () => {
 
             const buttonElement = buttonRef.current;
             dispatchClickEvent(buttonElement);
-            expect(rootListerner1).toHaveBeenCalledTimes(1);
+            expect(rootListener1).toHaveBeenCalledTimes(1);
-            expect(rootListerner2).toHaveBeenCalledTimes(1);
+            expect(rootListener2).toHaveBeenCalledTimes(1);
-            expect(rootListerner3).toHaveBeenCalledTimes(0);
+            expect(rootListener3).toHaveBeenCalledTimes(0);
-            expect(rootListerner4).toHaveBeenCalledTimes(0);
+            expect(rootListener4).toHaveBeenCalledTimes(0);
           });
 
           // @gate experimental
@@ -2229,7 +2229,7 @@ describe('DOMModernPluginEventSystem', () => {
 
             let customEventHandle;
 
-            // Test that we get a warning when we don't provide an explicit priortiy
+            // Test that we get a warning when we don't provide an explicit priority
             expect(() => {
               customEventHandle = ReactDOM.unstable_createEventHandle(
                 'custom-event',

packages/react-interactions/events/src/dom/__tests__/MixedResponders-test-internal.js

@@ -163,7 +163,7 @@ describe('mixing responders with the heritage event system', () => {
     },
   );
 
-  describe('mixing the Input and Press repsonders', () => {
+  describe('mixing the Input and Press responders', () => {
     // @gate experimental
     it('is async for non-input events', () => {
       const useTap = require('react-interactions/events/tap').useTap;

packages/react-interactions/events/src/dom/__tests__/Tap-test.internal.js

@@ -189,8 +189,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       expect(onTapCancel).toHaveBeenCalledTimes(0);
     });
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('below threshold', pointerType => {
         componentInit();
@@ -265,8 +265,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       document.elementFromPoint = () => ref.current;
     };
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('pointer down', pointerType => {
         componentInit();
@@ -328,8 +328,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       expect(onTapStart).toHaveBeenCalledTimes(1);
     });
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('ignored buttons and modifiers', pointerType => {
         componentInit();
@@ -416,8 +416,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       document.elementFromPoint = () => ref.current;
     };
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('pointer up', pointerType => {
         componentInit();
@@ -602,8 +602,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       document.elementFromPoint = () => ref.current;
     };
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('requires activation', pointerType => {
         componentInit();
@@ -726,8 +726,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       document.elementFromPoint = () => ref.current;
     };
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('pointer down/up', pointerType => {
         componentInit();
@@ -789,8 +789,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       ReactDOM.render(<Component />, container);
     };
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('pointer cancel', pointerType => {
         componentInit();
@@ -855,8 +855,8 @@ describeWithPointerEvent('Tap responder', hasPointerEvents => {
       });
     }
 
-    // TODO: Get rid of this condition somehow. Perhaps with a dynamic verion of
+    // TODO: Get rid of this condition somehow. Perhaps with a dynamic version
-    // the @gate pragma.
+    // of the @gate pragma.
     if (__EXPERIMENTAL__) {
       testWithPointerType('pointer move outside target', pointerType => {
         componentInit();

packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js

@@ -83,7 +83,7 @@ it('fails to register the same event name with different types', () => {
     }
 
     // This view config has the same bubbling and direct event name
-    // which will fail to register in developement.
+    // which will fail to register in development.
     return {
       uiViewClassName: 'InvalidEvents',
       validAttributes: {

packages/react-reconciler/src/ReactFiberDeprecatedEvents.new.js

@@ -94,7 +94,7 @@ function mountEventResponder(
 function updateEventListener(
   listener: ReactEventResponderListener<any, any>,
   fiber: Fiber,
-  visistedResponders: Set<ReactEventResponder<any, any>>,
+  visitedResponders: Set<ReactEventResponder<any, any>>,
   respondersMap: Map<
     ReactEventResponder<any, any>,
     ReactEventResponderInstance<any, any>,
@@ -114,7 +114,7 @@ function updateEventListener(
       'listeners created via React.unstable_useResponder().',
   );
   const listenerProps = ((props: any): Object);
-  if (visistedResponders.has(responder)) {
+  if (visitedResponders.has(responder)) {
     // show warning
     if (__DEV__) {
       console.error(
@@ -125,7 +125,7 @@ function updateEventListener(
     }
     return;
   }
-  visistedResponders.add(responder);
+  visitedResponders.add(responder);
   const responderInstance = respondersMap.get(responder);
 
   if (responderInstance === undefined) {
@@ -149,7 +149,7 @@ export function updateDeprecatedEventListeners(
   fiber: Fiber,
   rootContainerInstance: null | Container,
 ): void {
-  const visistedResponders = new Set();
+  const visitedResponders = new Set();
   let dependencies = fiber.dependencies;
   if (listeners != null) {
     if (dependencies === null) {
@@ -169,7 +169,7 @@ export function updateDeprecatedEventListeners(
         updateEventListener(
           listener,
           fiber,
-          visistedResponders,
+          visitedResponders,
           respondersMap,
           rootContainerInstance,
         );
@@ -178,7 +178,7 @@ export function updateDeprecatedEventListeners(
       updateEventListener(
         listeners,
         fiber,
-        visistedResponders,
+        visitedResponders,
         respondersMap,
         rootContainerInstance,
       );
@@ -191,7 +191,7 @@ export function updateDeprecatedEventListeners(
       const mountedResponders = Array.from(respondersMap.keys());
       for (let i = 0, length = mountedResponders.length; i < length; i++) {
         const mountedResponder = mountedResponders[i];
-        if (!visistedResponders.has(mountedResponder)) {
+        if (!visitedResponders.has(mountedResponder)) {
           const responderInstance = ((respondersMap.get(
             mountedResponder,
           ): any): ReactEventResponderInstance<any, any>);

packages/react-reconciler/src/ReactFiberDeprecatedEvents.old.js

@@ -94,7 +94,7 @@ function mountEventResponder(
 function updateEventListener(
   listener: ReactEventResponderListener<any, any>,
   fiber: Fiber,
-  visistedResponders: Set<ReactEventResponder<any, any>>,
+  visitedResponders: Set<ReactEventResponder<any, any>>,
   respondersMap: Map<
     ReactEventResponder<any, any>,
     ReactEventResponderInstance<any, any>,
@@ -114,7 +114,7 @@ function updateEventListener(
       'listeners created via React.unstable_useResponder().',
   );
   const listenerProps = ((props: any): Object);
-  if (visistedResponders.has(responder)) {
+  if (visitedResponders.has(responder)) {
     // show warning
     if (__DEV__) {
       console.error(
@@ -125,7 +125,7 @@ function updateEventListener(
     }
     return;
   }
-  visistedResponders.add(responder);
+  visitedResponders.add(responder);
   const responderInstance = respondersMap.get(responder);
 
   if (responderInstance === undefined) {
@@ -149,7 +149,7 @@ export function updateDeprecatedEventListeners(
   fiber: Fiber,
   rootContainerInstance: null | Container,
 ): void {
-  const visistedResponders = new Set();
+  const visitedResponders = new Set();
   let dependencies = fiber.dependencies;
   if (listeners != null) {
     if (dependencies === null) {
@@ -169,7 +169,7 @@ export function updateDeprecatedEventListeners(
         updateEventListener(
           listener,
           fiber,
-          visistedResponders,
+          visitedResponders,
           respondersMap,
           rootContainerInstance,
         );
@@ -178,7 +178,7 @@ export function updateDeprecatedEventListeners(
       updateEventListener(
         listeners,
         fiber,
-        visistedResponders,
+        visitedResponders,
         respondersMap,
         rootContainerInstance,
       );
@@ -191,7 +191,7 @@ export function updateDeprecatedEventListeners(
       const mountedResponders = Array.from(respondersMap.keys());
       for (let i = 0, length = mountedResponders.length; i < length; i++) {
         const mountedResponder = mountedResponders[i];
-        if (!visistedResponders.has(mountedResponder)) {
+        if (!visitedResponders.has(mountedResponder)) {
           const responderInstance = ((respondersMap.get(
             mountedResponder,
           ): any): ReactEventResponderInstance<any, any>);

packages/react-reconciler/src/ReactFiberHooks.new.js

@@ -925,7 +925,7 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
     }
     return snapshot;
   } else {
-    // This handles the special case of a mutable source being shared beween renderers.
+    // This handles the special case of a mutable source being shared between renderers.
     // In that case, if the source is mutated between the first and second renderer,
     // The second renderer don't know that it needs to reset the WIP version during unwind,
     // (because the hook only marks sources as dirty if it's written to their WIP version).
@@ -1072,7 +1072,7 @@ function useMutableSource<Source, Snapshot>(
   // It's possible that the underlying source was mutated between the when the last "change" event fired,
   // and when the current render (with the new getSnapshot function) is processed.
   //
-  // In both cases, we need to throw away pending udpates (since they are no longer relevant)
+  // In both cases, we need to throw away pending updates (since they are no longer relevant)
   // and treat reading from the source as we do in the mount case.
   if (
     !is(prevGetSnapshot, getSnapshot) ||

packages/react-reconciler/src/ReactFiberHooks.old.js

@@ -757,7 +757,7 @@ function updateReducer<S, I, A>(
 
         // Mark the event time of this update as relevant to this render pass.
         // TODO: This should ideally use the true event time of this update rather than
-        // its priority which is a derived and not reverseable value.
+        // its priority which is a derived and not reversible value.
         // TODO: We should skip this update if it was already committed but currently
         // we have no way of detecting the difference between a committed and suspended
         // update here.
@@ -925,7 +925,7 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
     }
     return snapshot;
   } else {
-    // This handles the special case of a mutable source being shared beween renderers.
+    // This handles the special case of a mutable source being shared between renderers.
     // In that case, if the source is mutated between the first and second renderer,
     // The second renderer don't know that it needs to reset the WIP version during unwind,
     // (because the hook only marks sources as dirty if it's written to their WIP version).
@@ -1072,7 +1072,7 @@ function useMutableSource<Source, Snapshot>(
   // It's possible that the underlying source was mutated between the when the last "change" event fired,
   // and when the current render (with the new getSnapshot function) is processed.
   //
-  // In both cases, we need to throw away pending udpates (since they are no longer relevant)
+  // In both cases, we need to throw away pending updates (since they are no longer relevant)
   // and treat reading from the source as we do in the mount case.
   if (
     !is(prevGetSnapshot, getSnapshot) ||

packages/react-reconciler/src/ReactFiberNewContext.new.js

@@ -244,7 +244,7 @@ export function propagateContextChange(
       enableSuspenseServerRenderer &&
       fiber.tag === DehydratedFragment
     ) {
-      // If a dehydrated suspense bounudary is in this subtree, we don't know
+      // If a dehydrated suspense boundary is in this subtree, we don't know
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;

packages/react-reconciler/src/ReactFiberNewContext.old.js

@@ -244,7 +244,7 @@ export function propagateContextChange(
       enableSuspenseServerRenderer &&
       fiber.tag === DehydratedFragment
     ) {
-      // If a dehydrated suspense bounudary is in this subtree, we don't know
+      // If a dehydrated suspense boundary is in this subtree, we don't know
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -161,6 +161,8 @@ export const createPortal = enableNewReconciler
 export const createComponentSelector = enableNewReconciler
   ? createComponentSelector_new
   : createComponentSelector_old;
+
+//TODO: "psuedo" is spelled "pseudo"
 export const createHasPsuedoClassSelector = enableNewReconciler
   ? createHasPsuedoClassSelector_new
   : createHasPsuedoClassSelector_old;

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -371,7 +371,7 @@ export function requestUpdateLane(
     // remove the special case and treat them as if they came from an
     // interleaved event. Regardless, this pattern is not officially supported.
     // This behavior is only a fallback. The flag only exists until we can roll
-    // out the setState warnning, since existing code might accidentally rely on
+    // out the setState warning, since existing code might accidentally rely on
     // the current behavior.
     return pickArbitraryLane(workInProgressRootRenderLanes);
   }
@@ -383,7 +383,7 @@ export function requestUpdateLane(
   //
   // However, the "included" lanes could be mutated in between updates in the
   // same event, like if you perform an update inside `flushSync`. Or any other
-  // codepath that might call `prepareFreshStack`.
+  // code path that might call `prepareFreshStack`.
   //
   // The trick we use is to cache the first of each of these inputs within an
   // event. Then reset the cached values once we can be sure the event is over.
@@ -1273,7 +1273,7 @@ function handleError(root, thrownValue): void {
         // sibling, or the parent if there are no siblings. But since the root
         // has no siblings nor a parent, we set it to null. Usually this is
         // handled by `completeUnitOfWork` or `unwindWork`, but since we're
-        // interntionally not calling those, we need set it here.
+        // intentionally not calling those, we need set it here.
         // TODO: Consider calling `unwindWork` to pop the contexts.
         workInProgress = null;
         return;

packages/react-reconciler/src/ReactFiberWorkLoop.old.js

@@ -371,7 +371,7 @@ export function requestUpdateLane(
     // remove the special case and treat them as if they came from an
     // interleaved event. Regardless, this pattern is not officially supported.
     // This behavior is only a fallback. The flag only exists until we can roll
-    // out the setState warnning, since existing code might accidentally rely on
+    // out the setState warning, since existing code might accidentally rely on
     // the current behavior.
     return pickArbitraryLane(workInProgressRootRenderLanes);
   }
@@ -383,7 +383,7 @@ export function requestUpdateLane(
   //
   // However, the "included" lanes could be mutated in between updates in the
   // same event, like if you perform an update inside `flushSync`. Or any other
-  // codepath that might call `prepareFreshStack`.
+  // code path that might call `prepareFreshStack`.
   //
   // The trick we use is to cache the first of each of these inputs within an
   // event. Then reset the cached values once we can be sure the event is over.

packages/react-reconciler/src/ReactInternalTypes.js

@@ -205,7 +205,7 @@ type BaseFiberRootProperties = {|
   // Node returned by Scheduler.scheduleCallback
   callbackNode: *,
 
-  // Used by useMutableSource hook to avoid tearing during hydrtaion.
+  // Used by useMutableSource hook to avoid tearing during hydration.
   mutableSourceEagerHydrationData?: Array<
     MutableSource<any> | MutableSourceVersion,
   > | null,

packages/react-reconciler/src/ReactStrictModeWarnings.new.js

@@ -64,7 +64,7 @@ if (__DEV__) {
     fiber: Fiber,
     instance: any,
   ) => {
-    // Dedup strategy: Warn once per component.
+    // Dedupe strategy: Warn once per component.
     if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
       return;
     }

packages/react-reconciler/src/ReactUpdateQueue.new.js

@@ -521,7 +521,7 @@ export function processUpdateQueue<State>(
 
         // Mark the event time of this update as relevant to this render pass.
         // TODO: This should ideally use the true event time of this update rather than
-        // its priority which is a derived and not reverseable value.
+        // its priority which is a derived and not reversible value.
         // TODO: We should skip this update if it was already committed but currently
         // we have no way of detecting the difference between a committed and suspended
         // update here.

packages/react-reconciler/src/ReactUpdateQueue.old.js

@@ -521,7 +521,7 @@ export function processUpdateQueue<State>(
 
         // Mark the event time of this update as relevant to this render pass.
         // TODO: This should ideally use the true event time of this update rather than
-        // its priority which is a derived and not reverseable value.
+        // its priority which is a derived and not reversible value.
         // TODO: We should skip this update if it was already committed but currently
         // we have no way of detecting the difference between a committed and suspended
         // update here.

packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js

@@ -71,9 +71,9 @@ describe('DebugTracing', () => {
 
   // @gate experimental && build === 'development' && enableDebugTracing
   it('should log sync render with suspense', async () => {
-    const fakeSuspensPromise = Promise.resolve(true);
+    const fakeSuspensePromise = Promise.resolve(true);
     function Example() {
-      throw fakeSuspensPromise;
+      throw fakeSuspensePromise;
     }
 
     ReactTestRenderer.create(
@@ -92,15 +92,15 @@ describe('DebugTracing', () => {
 
     logs.splice(0);
 
-    await fakeSuspensPromise;
+    await fakeSuspensePromise;
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
   // @gate experimental && build === 'development' && enableDebugTracing
   it('should log concurrent render with suspense', async () => {
-    const fakeSuspensPromise = Promise.resolve(true);
+    const fakeSuspensePromise = Promise.resolve(true);
     function Example() {
-      throw fakeSuspensPromise;
+      throw fakeSuspensePromise;
     }
 
     ReactTestRenderer.create(
@@ -126,7 +126,7 @@ describe('DebugTracing', () => {
 
     logs.splice(0);
 
-    await fakeSuspensPromise;
+    await fakeSuspensePromise;
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
@@ -319,9 +319,9 @@ describe('DebugTracing', () => {
       return didMount;
     }
 
-    const fakeSuspensPromise = new Promise(() => {});
+    const fakeSuspensePromise = new Promise(() => {});
     function ExampleThatSuspends() {
-      throw fakeSuspensPromise;
+      throw fakeSuspensePromise;
     }
 
     function Example() {

packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js

@@ -1774,7 +1774,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
         });
 
-        // effects get fored on exiting act()
+        // effects get forced on exiting act()
         // There were multiple updates, but there should only be a
         // single render
         expect(Scheduler).toHaveYielded(['Count: 0']);

packages/react-reconciler/src/__tests__/ReactIncremental-test.js

@@ -25,7 +25,7 @@ describe('ReactIncremental', () => {
   });
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>

packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js

@@ -46,7 +46,7 @@ describe('ReactIncrementalErrorHandling', () => {
   }
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>
@@ -440,8 +440,8 @@ describe('ReactIncrementalErrorHandling', () => {
       'C',
       'D',
 
-      // Since the error occured during a partially concurrent render, we should
+      // Since the error occurred during a partially concurrent render, we should
-      // retry one more time, synchonrously.
+      // retry one more time, synchronously.
       'A',
       'B',
       'Oops',

packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js

@@ -39,7 +39,7 @@ describe('ReactIncrementalSideEffects', () => {
   }
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>

packages/react-reconciler/src/__tests__/ReactNewContext-test.js

@@ -43,7 +43,7 @@ describe('ReactNewContext', () => {
   }
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>

packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js

@@ -54,7 +54,7 @@ describe('ReactSchedulerIntegration', () => {
   }
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>
@@ -500,7 +500,7 @@ describe(
       // This test reproduces a bug where React's Scheduler task timed out but
       // the `shouldYield` method returned true. Usually we try not to mock
       // internal methods, but I've made an exception here since the point is
-      // specifically to test that React is reslient to the behavior of a
+      // specifically to test that React is resilient to the behavior of a
       // Scheduler API. That being said, feel free to rewrite or delete this
       // test if/when the API changes.
       function Text({text}) {

packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js

@@ -141,7 +141,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   }
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>

packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js

@@ -180,7 +180,7 @@ describe('useMutableSource', () => {
       source.value = 'two';
       expect(Scheduler).toFlushAndYieldThrough(['a:two', 'b:two']);
 
-      // Umounting a component should remove its subscriptino.
+      // Umounting a component should remove its subscription.
       ReactNoop.renderToRootWithID(
         <>
           <Component
@@ -391,7 +391,7 @@ describe('useMutableSource', () => {
       expect(unsubscribeA).toHaveBeenCalledTimes(1);
       expect(subscribeB).toHaveBeenCalledTimes(1);
 
-      // Unmounting should call the newer unsunscribe.
+      // Unmounting should call the newer unsubscribe.
       ReactNoop.unmountRootWithID('root');
       expect(Scheduler).toFlushAndYield([]);
       ReactNoop.flushPassiveEffects();
@@ -430,7 +430,7 @@ describe('useMutableSource', () => {
       source.value = 'two';
       expect(Scheduler).toFlushAndYieldThrough(['a:two']);
 
-      // Re-renders that occur before the udpate is processed
+      // Re-renders that occur before the update is processed
       // should reuse snapshot so long as the config has not changed
       ReactNoop.flushSync(() => {
         ReactNoop.render(
@@ -692,7 +692,7 @@ describe('useMutableSource', () => {
       );
       expect(Scheduler).toFlushAndYield(['a:a:one', 'Sync effect']);
 
-      // Because the store has not chagned yet, there are no pending updates,
+      // Because the store has not changed yet, there are no pending updates,
       // so it is considered safe to read from when we start this render.
       ReactNoop.render(
         <>
@@ -1002,7 +1002,7 @@ describe('useMutableSource', () => {
   });
 
   // @gate experimental
-  it('should not warn about updates that fire between unmount and passive unsubcribe', () => {
+  it('should not warn about updates that fire between unmount and passive unsubscribe', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source);
 
@@ -1027,7 +1027,7 @@ describe('useMutableSource', () => {
       expect(Scheduler).toFlushAndYield(['only:one', 'Sync effect']);
       ReactNoop.flushPassiveEffects();
 
-      // Umounting a root should remove the remaining event listeners in a passive effect
+      // Unmounting a root should remove the remaining event listeners in a passive effect
       ReactNoop.unmountRootWithID('root');
       expect(Scheduler).toFlushAndYieldThrough(['layout unmount']);
 
@@ -1612,7 +1612,7 @@ describe('useMutableSource', () => {
       ]);
 
       // Now there are two pending mutations at different priorities. But they
-      // both read the same verion of the mutable source, so we must render
+      // both read the same version of the mutable source, so we must render
       // them simultaneously.
       //
       expect(Scheduler).toFlushAndYieldThrough([

packages/react-refresh/src/ReactFreshBabelPlugin.js

@@ -307,7 +307,7 @@ export default function(babel, opts = {}) {
     if (typeof require === 'function' && !opts.emitFullSignatures) {
       // Prefer to hash when we can (e.g. outside of ASTExplorer).
       // This makes it deterministically compact, even if there's
-      // e.g. a useState ininitalizer with some code inside.
+      // e.g. a useState initializer with some code inside.
       // We also need it for www that has transforms like cx()
       // that don't understand if something is part of a string.
       finalKey = require('crypto')
@@ -537,7 +537,7 @@ export default function(babel, opts = {}) {
 
           // Unlike with $RefreshReg$, this needs to work for nested
           // declarations too. So we need to search for a path where
-          // we can insert a statement rather than hardcoding it.
+          // we can insert a statement rather than hard coding it.
           let insertAfterPath = null;
           path.find(p => {
             if (p.parentPath.isBlock()) {

packages/react-refresh/src/__tests__/ReactFreshMultipleRenderer-test.internal.js

@@ -41,7 +41,7 @@ describe('ReactFresh', () => {
     }
   });
 
-  it('can update components managd by different renderers independently', () => {
+  it('can update components managed by different renderers independently', () => {
     if (__DEV__) {
       const InnerV1 = function() {
         return <ReactART.Shape fill="blue" />;

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

@@ -1497,7 +1497,7 @@ describe('ReactShallowRenderer', () => {
     const shallowRenderer = createRenderer();
     shallowRenderer.render(<Foo foo={1} bar={1} />);
     expect(renderCount).toBe(1);
-    // Change a prop that the comparison funciton ignores
+    // Change a prop that the comparison function ignores
     shallowRenderer.render(<Foo foo={1} bar={2} />);
     expect(renderCount).toBe(1);
     shallowRenderer.render(<Foo foo={2} bar={2} />);

packages/react/src/ReactFundamental.js

@@ -22,12 +22,12 @@ export function createFundamental<C, H>(
   if (__DEV__ && !hasBadMapPolyfill) {
     Object.freeze(impl);
   }
-  const fundamantalComponent = {
+  const fundamentalComponent = {
     $$typeof: REACT_FUNDAMENTAL_TYPE,
     impl,
   };
   if (__DEV__) {
-    Object.freeze(fundamantalComponent);
+    Object.freeze(fundamentalComponent);
   }
-  return fundamantalComponent;
+  return fundamentalComponent;
 }

packages/react/src/__tests__/ReactDOMTracing-test.internal.js

@@ -56,7 +56,7 @@ function loadModules() {
 }
 
 // Note: This is based on a similar component we use in www. We can delete once
-// the extra div wrapper is no longer neccessary.
+// the extra div wrapper is no longer necessary.
 function LegacyHiddenDiv({children, mode}) {
   return (
     <div hidden={mode === 'hidden'}>

packages/react/src/__tests__/ReactProfiler-test.internal.js

@@ -1282,7 +1282,7 @@ describe('Profiler', () => {
       it('should report time spent in layout effects and commit lifecycles', () => {
         const callback = jest.fn();
 
-        const ComponetWithEffects = () => {
+        const ComponentWithEffects = () => {
           React.useLayoutEffect(() => {
             Scheduler.unstable_advanceTime(10);
             return () => {
@@ -1321,7 +1321,7 @@ describe('Profiler', () => {
 
         const renderer = ReactTestRenderer.create(
           <React.Profiler id="mount-test" onCommit={callback}>
-            <ComponetWithEffects />
+            <ComponentWithEffects />
             <ComponentWithCommitHooks />
           </React.Profiler>,
         );
@@ -1341,7 +1341,7 @@ describe('Profiler', () => {
 
         renderer.update(
           <React.Profiler id="update-test" onCommit={callback}>
-            <ComponetWithEffects />
+            <ComponentWithEffects />
             <ComponentWithCommitHooks />
           </React.Profiler>,
         );
@@ -1378,7 +1378,7 @@ describe('Profiler', () => {
       it('should report time spent in layout effects and commit lifecycles with cascading renders', () => {
         const callback = jest.fn();
 
-        const ComponetWithEffects = ({shouldCascade}) => {
+        const ComponentWithEffects = ({shouldCascade}) => {
           const [didCascade, setDidCascade] = React.useState(false);
           React.useLayoutEffect(() => {
             if (shouldCascade && !didCascade) {
@@ -1414,7 +1414,7 @@ describe('Profiler', () => {
 
         const renderer = ReactTestRenderer.create(
           <React.Profiler id="mount-test" onCommit={callback}>
-            <ComponetWithEffects shouldCascade={true} />
+            <ComponentWithEffects shouldCascade={true} />
             <ComponentWithCommitHooks />
           </React.Profiler>,
         );
@@ -1443,7 +1443,7 @@ describe('Profiler', () => {
 
         renderer.update(
           <React.Profiler id="update-test" onCommit={callback}>
-            <ComponetWithEffects />
+            <ComponentWithEffects />
             <ComponentWithCommitHooks shouldCascade={true} />
           </React.Profiler>,
         );
@@ -1472,7 +1472,7 @@ describe('Profiler', () => {
       it('should bubble time spent in layout effects to higher profilers', () => {
         const callback = jest.fn();
 
-        const ComponetWithEffects = ({
+        const ComponentWithEffects = ({
           cleanupDuration,
           duration,
           setCountRef,
@@ -1498,14 +1498,14 @@ describe('Profiler', () => {
           renderer = ReactTestRenderer.create(
             <React.Profiler id="root-mount" onCommit={callback}>
               <React.Profiler id="a">
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   cleanupDuration={100}
                   setCountRef={setCountRef}
                 />
               </React.Profiler>
               <React.Profiler id="b">
-                <ComponetWithEffects duration={1000} cleanupDuration={10000} />
+                <ComponentWithEffects duration={1000} cleanupDuration={10000} />
               </React.Profiler>
             </React.Profiler>,
           );
@@ -1539,7 +1539,7 @@ describe('Profiler', () => {
           renderer.update(
             <React.Profiler id="root-update" onCommit={callback}>
               <React.Profiler id="b">
-                <ComponetWithEffects duration={1000} cleanupDuration={10000} />
+                <ComponentWithEffects duration={1000} cleanupDuration={10000} />
               </React.Profiler>
             </React.Profiler>,
           );
@@ -1572,7 +1572,7 @@ describe('Profiler', () => {
           }
         }
 
-        const ComponetWithEffects = ({
+        const ComponentWithEffects = ({
           cleanupDuration,
           duration,
           effectDuration,
@@ -1600,20 +1600,20 @@ describe('Profiler', () => {
             <React.Profiler id="root" onCommit={callback}>
               <ErrorBoundary
                 fallback={
-                  <ComponetWithEffects
+                  <ComponentWithEffects
                     duration={10000000}
                     effectDuration={100000000}
                     cleanupDuration={1000000000}
                   />
                 }>
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   effectDuration={100}
                   cleanupDuration={1000}
                   shouldThrow={true}
                 />
               </ErrorBoundary>
-              <ComponetWithEffects
+              <ComponentWithEffects
                 duration={10000}
                 effectDuration={100000}
                 cleanupDuration={1000000}
@@ -1660,7 +1660,7 @@ describe('Profiler', () => {
           }
         }
 
-        const ComponetWithEffects = ({
+        const ComponentWithEffects = ({
           cleanupDuration,
           duration,
           effectDuration,
@@ -1688,20 +1688,20 @@ describe('Profiler', () => {
             <React.Profiler id="root" onCommit={callback}>
               <ErrorBoundary
                 fallback={
-                  <ComponetWithEffects
+                  <ComponentWithEffects
                     duration={10000000}
                     effectDuration={100000000}
                     cleanupDuration={1000000000}
                   />
                 }>
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   effectDuration={100}
                   cleanupDuration={1000}
                   shouldThrow={true}
                 />
               </ErrorBoundary>
-              <ComponetWithEffects
+              <ComponentWithEffects
                 duration={10000}
                 effectDuration={100000}
                 cleanupDuration={1000000}
@@ -1731,20 +1731,20 @@ describe('Profiler', () => {
             <React.Profiler id="root" onCommit={callback}>
               <ErrorBoundary
                 fallback={
-                  <ComponetWithEffects
+                  <ComponentWithEffects
                     duration={10000000}
                     effectDuration={100000000}
                     cleanupDuration={1000000000}
                   />
                 }>
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   effectDuration={100}
                   cleanupDuration={1000}
                   shouldThrow={false}
                 />
               </ErrorBoundary>
-              <ComponetWithEffects
+              <ComponentWithEffects
                 duration={10000}
                 effectDuration={100000}
                 cleanupDuration={1000000}
@@ -1780,7 +1780,7 @@ describe('Profiler', () => {
         it('should report interactions that were active', () => {
           const callback = jest.fn();
 
-          const ComponetWithEffects = () => {
+          const ComponentWithEffects = () => {
             const [didMount, setDidMount] = React.useState(false);
             React.useLayoutEffect(() => {
               Scheduler.unstable_advanceTime(didMount ? 1000 : 100);
@@ -1809,7 +1809,7 @@ describe('Profiler', () => {
             () => {
               ReactTestRenderer.create(
                 <React.Profiler id="root" onCommit={callback}>
-                  <ComponetWithEffects />
+                  <ComponentWithEffects />
                 </React.Profiler>,
               );
             },
@@ -1848,7 +1848,7 @@ describe('Profiler', () => {
       it('should report time spent in passive effects', () => {
         const callback = jest.fn();
 
-        const ComponetWithEffects = () => {
+        const ComponentWithEffects = () => {
           React.useLayoutEffect(() => {
             // This layout effect is here to verify that its time isn't reported.
             Scheduler.unstable_advanceTime(5);
@@ -1877,7 +1877,7 @@ describe('Profiler', () => {
         ReactTestRenderer.act(() => {
           renderer = ReactTestRenderer.create(
             <React.Profiler id="mount-test" onPostCommit={callback}>
-              <ComponetWithEffects />
+              <ComponentWithEffects />
             </React.Profiler>,
           );
         });
@@ -1899,7 +1899,7 @@ describe('Profiler', () => {
         ReactTestRenderer.act(() => {
           renderer.update(
             <React.Profiler id="update-test" onPostCommit={callback}>
-              <ComponetWithEffects />
+              <ComponentWithEffects />
             </React.Profiler>,
           );
         });
@@ -1944,7 +1944,7 @@ describe('Profiler', () => {
       it('should report time spent in passive effects with cascading renders', () => {
         const callback = jest.fn();
 
-        const ComponetWithEffects = () => {
+        const ComponentWithEffects = () => {
           const [didMount, setDidMount] = React.useState(false);
           React.useEffect(() => {
             if (!didMount) {
@@ -1963,7 +1963,7 @@ describe('Profiler', () => {
         ReactTestRenderer.act(() => {
           ReactTestRenderer.create(
             <React.Profiler id="mount-test" onPostCommit={callback}>
-              <ComponetWithEffects />
+              <ComponentWithEffects />
             </React.Profiler>,
           );
         });
@@ -1992,7 +1992,7 @@ describe('Profiler', () => {
       it('should bubble time spent in effects to higher profilers', () => {
         const callback = jest.fn();
 
-        const ComponetWithEffects = ({
+        const ComponentWithEffects = ({
           cleanupDuration,
           duration,
           setCountRef,
@@ -2018,14 +2018,14 @@ describe('Profiler', () => {
           renderer = ReactTestRenderer.create(
             <React.Profiler id="root-mount" onPostCommit={callback}>
               <React.Profiler id="a">
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   cleanupDuration={100}
                   setCountRef={setCountRef}
                 />
               </React.Profiler>
               <React.Profiler id="b">
-                <ComponetWithEffects duration={1000} cleanupDuration={10000} />
+                <ComponentWithEffects duration={1000} cleanupDuration={10000} />
               </React.Profiler>
             </React.Profiler>,
           );
@@ -2059,7 +2059,7 @@ describe('Profiler', () => {
           renderer.update(
             <React.Profiler id="root-update" onPostCommit={callback}>
               <React.Profiler id="b">
-                <ComponetWithEffects duration={1000} cleanupDuration={10000} />
+                <ComponentWithEffects duration={1000} cleanupDuration={10000} />
               </React.Profiler>
             </React.Profiler>,
           );
@@ -2092,7 +2092,7 @@ describe('Profiler', () => {
           }
         }
 
-        const ComponetWithEffects = ({
+        const ComponentWithEffects = ({
           cleanupDuration,
           duration,
           effectDuration,
@@ -2120,20 +2120,20 @@ describe('Profiler', () => {
             <React.Profiler id="root" onPostCommit={callback}>
               <ErrorBoundary
                 fallback={
-                  <ComponetWithEffects
+                  <ComponentWithEffects
                     duration={10000000}
                     effectDuration={100000000}
                     cleanupDuration={1000000000}
                   />
                 }>
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   effectDuration={100}
                   cleanupDuration={1000}
                   shouldThrow={true}
                 />
               </ErrorBoundary>
-              <ComponetWithEffects
+              <ComponentWithEffects
                 duration={10000}
                 effectDuration={100000}
                 cleanupDuration={1000000}
@@ -2180,7 +2180,7 @@ describe('Profiler', () => {
           }
         }
 
-        const ComponetWithEffects = ({
+        const ComponentWithEffects = ({
           cleanupDuration,
           duration,
           effectDuration,
@@ -2209,20 +2209,20 @@ describe('Profiler', () => {
             <React.Profiler id="root" onPostCommit={callback}>
               <ErrorBoundary
                 fallback={
-                  <ComponetWithEffects
+                  <ComponentWithEffects
                     duration={10000000}
                     effectDuration={100000000}
                     cleanupDuration={1000000000}
                   />
                 }>
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   effectDuration={100}
                   cleanupDuration={1000}
                   shouldThrow={true}
                 />
               </ErrorBoundary>
-              <ComponetWithEffects
+              <ComponentWithEffects
                 duration={10000}
                 effectDuration={100000}
                 cleanupDuration={1000000}
@@ -2252,20 +2252,20 @@ describe('Profiler', () => {
             <React.Profiler id="root" onPostCommit={callback}>
               <ErrorBoundary
                 fallback={
-                  <ComponetWithEffects
+                  <ComponentWithEffects
                     duration={10000000}
                     effectDuration={100000000}
                     cleanupDuration={1000000000}
                   />
                 }>
-                <ComponetWithEffects
+                <ComponentWithEffects
                   duration={10}
                   effectDuration={100}
                   cleanupDuration={1000}
                   shouldThrow={false}
                 />
               </ErrorBoundary>
-              <ComponetWithEffects
+              <ComponentWithEffects
                 duration={10000}
                 effectDuration={100000}
                 cleanupDuration={1000000}
@@ -2303,7 +2303,7 @@ describe('Profiler', () => {
         it('should report interactions that were active', () => {
           const callback = jest.fn();
 
-          const ComponetWithEffects = () => {
+          const ComponentWithEffects = () => {
             const [didMount, setDidMount] = React.useState(false);
             React.useEffect(() => {
               Scheduler.unstable_advanceTime(didMount ? 1000 : 100);
@@ -2333,7 +2333,7 @@ describe('Profiler', () => {
               () => {
                 ReactTestRenderer.create(
                   <React.Profiler id="root" onPostCommit={callback}>
-                    <ComponetWithEffects />
+                    <ComponentWithEffects />
                   </React.Profiler>,
                 );
               },
@@ -2875,7 +2875,7 @@ describe('Profiler', () => {
         Scheduler.unstable_yieldValue('onPostCommit');
       });
 
-      const ComponetWithEffects = () => {
+      const ComponentWithEffects = () => {
         React.useEffect(() => {
           Scheduler.unstable_yieldValue('passive effect');
         });
@@ -2892,7 +2892,7 @@ describe('Profiler', () => {
             id="root"
             onCommit={onCommit}
             onPostCommit={onPostCommit}>
-            <ComponetWithEffects />
+            <ComponentWithEffects />
           </React.Profiler>,
         );
       });

packages/scheduler/src/Scheduler.js

@@ -147,7 +147,7 @@ function flushWork(hasTimeRemaining, initialTime) {
         throw error;
       }
     } else {
-      // No catch in prod codepath.
+      // No catch in prod code path.
       return workLoop(hasTimeRemaining, initialTime);
     }
   } finally {

packages/scheduler/src/forks/SchedulerHostConfig.default.js

@@ -174,7 +174,7 @@ if (
       // Using console['error'] to evade Babel and ESLint
       console['error'](
         'forceFrameRate takes a positive int between 0 and 125, ' +
-          'forcing framerates higher than 125 fps is not unsupported',
+          'forcing frame rates higher than 125 fps is not unsupported',
       );
       return;
     }

packages/shared/ReactFeatureFlags.js

@@ -8,7 +8,7 @@
  */
 
 // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
-// This prevents e.g. <img src=""> from making an unnecessar HTTP request for certain browsers.
+// This prevents e.g. <img src=""> from making an unnecessary HTTP request for certain browsers.
 export const enableFilterEmptyStringAttributesDOM = false;
 
 // Adds verbose console logging for e.g. state updates, suspense, and work loop stuff.

scripts/error-codes/__tests__/invertObject-test.js

@@ -27,7 +27,7 @@ describe('invertObject', () => {
     });
   });
 
-  it("should take the last value when there're duplications in vals", () => {
+  it('should take the last value when there are duplications in vals', () => {
     expect(
       invertObject({
         a: '3',

scripts/error-codes/codes.json

@@ -181,7 +181,7 @@
   "178": "Should have next effect. This error is likely caused by a bug in React. Please file an issue.",
   "179": "Should have a pending commit. This error is likely caused by a bug in React. Please file an issue.",
   "180": "Commit phase errors should be scheduled to recover with task priority. This error is likely caused by a bug in React. Please file an issue.",
-  "181": "Switch statement should be exhuastive. This error is likely caused by a bug in React. Please file an issue.",
+  "181": "Switch statement should be exhaustive. This error is likely caused by a bug in React. Please file an issue.",
   "182": "performWork was called recursively. This error is likely caused by a bug in React. Please file an issue.",
   "183": "Should have found an error boundary. This error is likely caused by a bug in React. Please file an issue.",
   "184": "No error for given unit of work. This error is likely caused by a bug in React. Please file an issue.",
@@ -255,7 +255,7 @@
   "253": "work.commit(): Cannot commit while already rendering. This likely means you attempted to commit from inside a lifecycle method.",
   "254": "Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a functional component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://fb.me/react-refs-must-have-owner for more information.",
   "255": "Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.",
-  "256": "Expected ReactFiberErrorDialog.showErrorDialog to existbe a function.",
+  "256": "Expected ReactFiberErrorDialog.showErrorDialog to be a function.",
   "257": "Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render.",
   "258": "Unknown element-like object type: %s. This is likely a bug in React. Please file an issue.",
   "259": "The experimental Call and Return types are not currently supported by the server renderer.",
@@ -271,7 +271,7 @@
   "269": "Profiler must specify an \"id\" string and \"onRender\" function as props",
   "270": "The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.",
   "271": "Failed to replay rendering after an error. This is likely caused by a bug in React. Please file an issue with a reproducing case to help us find it.",
-  "272": "The current renderer does not support hyration. This error is likely caused by a bug in React. Please file an issue.",
+  "272": "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue.",
   "273": "Nesting of <View> within <Text> is not currently supported.",
   "274": "Text strings must be rendered within a <Text> component.",
   "275": "The current renderer does not support mutation. This error is likely caused by a bug in React. Please file an issue.",
@@ -366,5 +366,5 @@
   "365": "Invalid selector type %s specified.",
   "366": "ReactDOM.createEventHandle: setListener called on an target that did not have a corresponding root. This is likely a bug in React.",
   "367": "ReactDOM.createEventHandle: setListener called on an element target that is not managed by React. Ensure React rendered the DOM element.",
-  "368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a vaid EventTarget or an element managed by React."
+  "368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a valid EventTarget or an element managed by React."
 }