@types/react 18.2.54 → 18.2.55

react/README.md

@@ -8,7 +8,7 @@ This package contains type definitions for react (https://react.dev/).
 Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react.
 
 ### Additional Details
- * Last updated: Mon, 05 Feb 2024 19:06:53 GMT
+ * Last updated: Tue, 06 Feb 2024 09:35:42 GMT
  * Dependencies: [@types/prop-types](https://npmjs.com/package/@types/prop-types), [@types/scheduler](https://npmjs.com/package/@types/scheduler), [csstype](https://npmjs.com/package/csstype)
 
 # Credits

react/index.d.ts

@@ -260,6 +260,21 @@ declare namespace React {
         ref?: LegacyRef<T> | undefined;
     }
 
+    /**
+     * Represents a JSX element.
+     *
+     * Where {@link ReactNode} represents everything that can be rendered, `ReactElement`
+     * only represents JSX.
+     *
+     * @template P The type of the props object
+     * @template T The type of the component or tag
+     *
+     * @example
+     *
+     * ```tsx
+     * const element: ReactElement = <div />;
+     * ```
+     */
     interface ReactElement<
         P = any,
         T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>,
@@ -380,6 +395,8 @@ declare namespace React {
     /**
      * Represents all of the things React can render.
      *
+     * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.
+     *
      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}
      *
      * @example
@@ -551,6 +568,8 @@ declare namespace React {
      *
      * But they are, in fact, not callable - instead, they are objects which
      * are treated specially by the renderer.
+     *
+     * @template P The props the component accepts.
      */
     interface ExoticComponent<P = {}> {
         (props: P): ReactNode;
@@ -559,6 +578,8 @@ declare namespace React {
 
     /**
      * An {@link ExoticComponent} with a `displayName` property applied to it.
+     *
+     * @template P The props the component accepts.
      */
     interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
         /**
@@ -573,6 +594,8 @@ declare namespace React {
 
     /**
      * An {@link ExoticComponent} with a `propTypes` property applied to it.
+     *
+     * @template P The props the component accepts.
      */
     interface ProviderExoticComponent<P> extends ExoticComponent<P> {
         propTypes?: WeakValidationMap<P> | undefined;
@@ -581,6 +604,8 @@ declare namespace React {
     /**
      * Used to retrieve the type of a context object from a {@link Context}.
      *
+     * @template C The context object.
+     *
      * @example
      *
      * ```tsx
@@ -1620,6 +1645,24 @@ declare namespace React {
         readonly type: T;
     };
 
+    /**
+     * Lets you skip re-rendering a component when its props are unchanged.
+     *
+     * @see {@link https://react.dev/reference/react/memo React Docs}
+     *
+     * @param Component The component to memoize.
+     * @param propsAreEqual A function that will be used to determine if the props have changed.
+     *
+     * @example
+     *
+     * ```tsx
+     * import { memo } from 'react';
+     *
+     * const SomeComponent = memo(function SomeComponent(props: { foo: string }) {
+     *   // ...
+     * });
+     * ```
+     */
     function memo<P extends object>(
         Component: FunctionComponent<P>,
         propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean,
@@ -1629,26 +1672,70 @@ declare namespace React {
         propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean,
     ): MemoExoticComponent<T>;
 
-    type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<CustomComponentPropsWithRef<T>> & {
+    interface LazyExoticComponent<T extends ComponentType<any>>
+        extends ExoticComponent<CustomComponentPropsWithRef<T>>
+    {
         readonly _result: T;
-    };
+    }
 
+    /**
+     * Lets you defer loading a component’s code until it is rendered for the first time.
+     *
+     * @see {@link https://react.dev/reference/react/lazy React Docs}
+     *
+     * @param load A function that returns a `Promise` or another thenable (a `Promise`-like object with a
+     * then method). React will not call `load` until the first time you attempt to render the returned
+     * component. After React first calls load, it will wait for it to resolve, and then render the
+     * resolved value’s `.default` as a React component. Both the returned `Promise` and the `Promise`’s
+     * resolved value will be cached, so React will not call load more than once. If the `Promise` rejects,
+     * React will throw the rejection reason for the nearest Error Boundary to handle.
+     *
+     * @example
+     *
+     * ```tsx
+     * import { lazy } from 'react';
+     *
+     * const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
+     * ```
+     */
     function lazy<T extends ComponentType<any>>(
-        factory: () => Promise<{ default: T }>,
+        load: () => Promise<{ default: T }>,
     ): LazyExoticComponent<T>;
 
     //
     // React Hooks
     // ----------------------------------------------------------------------
 
-    // based on the code in https://github.com/facebook/react/pull/13968
-
-    // Unlike the class component setState, the updates are not allowed to be partial
+    /**
+     * The instruction passed to a {@link Dispatch} function in {@link useState}
+     * to tell React what the next value of the {@link useState} should be.
+     *
+     * Often found wrapped in {@link Dispatch}.
+     *
+     * @template S The type of the state.
+     *
+     * @example
+     *
+     * ```tsx
+     * // This return type correctly represents the type of
+     * // `setCount` in the example below.
+     * const useCustomState = (): Dispatch<SetStateAction<number>> => {
+     *   const [count, setCount] = useState(0);
+     *
+     *   return setCount;
+     * }
+     * ```
+     */
     type SetStateAction<S> = S | ((prevState: S) => S);
-    // this technically does accept a second argument, but it's already under a deprecation warning
-    // and it's not even released so probably better to not define it.
+
+    /**
+     * A function that can be used to update the state of a {@link useState}
+     * or {@link useReducer} hook.
+     */
     type Dispatch<A> = (value: A) => void;
-    // Since action _can_ be undefined, dispatch may be called without any parameters.
+    /**
+     * A {@link Dispatch} function can sometimes be called without any arguments.
+     */
     type DispatchWithoutAction = () => void;
     // Unlike redux, the actions _can_ be anything
     type Reducer<S, A> = (prevState: S, action: A) => S;

react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@types/react",
-    "version": "18.2.54",
+    "version": "18.2.55",
     "description": "TypeScript definitions for react",
     "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react",
     "license": "MIT",
@@ -201,6 +201,6 @@
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
     },
-    "typesPublisherContentHash": "922d20729fb53d28cfe96cc0465943dbba834f9fdb3686885737ee539e61333b",
+    "typesPublisherContentHash": "41cc4f9203a010eff4158b37583d535e6867e99253ce9e203f10ddc95a2cdb36",
     "typeScriptVersion": "4.6"
 }

react/ts5.0/index.d.ts

@@ -256,6 +256,21 @@ declare namespace React {
         ref?: LegacyRef<T> | undefined;
     }
 
+    /**
+     * Represents a JSX element.
+     *
+     * Where {@link ReactNode} represents everything that can be rendered, `ReactElement`
+     * only represents JSX.
+     *
+     * @template P The type of the props object
+     * @template T The type of the component or tag
+     *
+     * @example
+     *
+     * ```tsx
+     * const element: ReactElement = <div />;
+     * ```
+     */
     interface ReactElement<
         P = any,
         T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>,
@@ -378,6 +393,8 @@ declare namespace React {
     /**
      * Represents all of the things React can render.
      *
+     * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.
+     *
      * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet}
      *
      * @example
@@ -549,6 +566,8 @@ declare namespace React {
      *
      * But they are, in fact, not callable - instead, they are objects which
      * are treated specially by the renderer.
+     *
+     * @template P The props the component accepts.
      */
     interface ExoticComponent<P = {}> {
         (props: P): ReactElement | null;
@@ -557,6 +576,8 @@ declare namespace React {
 
     /**
      * An {@link ExoticComponent} with a `displayName` property applied to it.
+     *
+     * @template P The props the component accepts.
      */
     interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
         /**
@@ -571,6 +592,8 @@ declare namespace React {
 
     /**
      * An {@link ExoticComponent} with a `propTypes` property applied to it.
+     *
+     * @template P The props the component accepts.
      */
     interface ProviderExoticComponent<P> extends ExoticComponent<P> {
         propTypes?: WeakValidationMap<P> | undefined;
@@ -579,6 +602,8 @@ declare namespace React {
     /**
      * Used to retrieve the type of a context object from a {@link Context}.
      *
+     * @template C The context object.
+     *
      * @example
      *
      * ```tsx
@@ -1618,6 +1643,24 @@ declare namespace React {
         readonly type: T;
     };
 
+    /**
+     * Lets you skip re-rendering a component when its props are unchanged.
+     *
+     * @see {@link https://react.dev/reference/react/memo React Docs}
+     *
+     * @param Component The component to memoize.
+     * @param propsAreEqual A function that will be used to determine if the props have changed.
+     *
+     * @example
+     *
+     * ```tsx
+     * import { memo } from 'react';
+     *
+     * const SomeComponent = memo(function SomeComponent(props: { foo: string }) {
+     *   // ...
+     * });
+     * ```
+     */
     function memo<P extends object>(
         Component: FunctionComponent<P>,
         propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean,
@@ -1631,8 +1674,28 @@ declare namespace React {
         readonly _result: T;
     };
 
+    /**
+     * Lets you defer loading a component’s code until it is rendered for the first time.
+     *
+     * @see {@link https://react.dev/reference/react/lazy React Docs}
+     *
+     * @param load A function that returns a `Promise` or another thenable (a `Promise`-like object with a
+     * then method). React will not call `load` until the first time you attempt to render the returned
+     * component. After React first calls load, it will wait for it to resolve, and then render the
+     * resolved value’s `.default` as a React component. Both the returned `Promise` and the `Promise`’s
+     * resolved value will be cached, so React will not call load more than once. If the `Promise` rejects,
+     * React will throw the rejection reason for the nearest Error Boundary to handle.
+     *
+     * @example
+     *
+     * ```tsx
+     * import { lazy } from 'react';
+     *
+     * const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
+     * ```
+     */
     function lazy<T extends ComponentType<any>>(
-        factory: () => Promise<{ default: T }>,
+        load: () => Promise<{ default: T }>,
     ): LazyExoticComponent<T>;
 
     //
@@ -1641,12 +1704,36 @@ declare namespace React {
 
     // based on the code in https://github.com/facebook/react/pull/13968
 
-    // Unlike the class component setState, the updates are not allowed to be partial
+    /**
+     * The instruction passed to a {@link Dispatch} function in {@link useState}
+     * to tell React what the next value of the {@link useState} should be.
+     *
+     * Often found wrapped in {@link Dispatch}.
+     *
+     * @template S The type of the state.
+     *
+     * @example
+     *
+     * ```tsx
+     * // This return type correctly represents the type of
+     * // `setCount` in the example below.
+     * const useCustomState = (): Dispatch<SetStateAction<number>> => {
+     *   const [count, setCount] = useState(0);
+     *
+     *   return setCount;
+     * }
+     * ```
+     */
     type SetStateAction<S> = S | ((prevState: S) => S);
-    // this technically does accept a second argument, but it's already under a deprecation warning
-    // and it's not even released so probably better to not define it.
+
+    /**
+     * A function that can be used to update the state of a {@link useState}
+     * or {@link useReducer} hook.
+     */
     type Dispatch<A> = (value: A) => void;
-    // Since action _can_ be undefined, dispatch may be called without any parameters.
+    /**
+     * A {@link Dispatch} function can sometimes be called without any arguments.
+     */
     type DispatchWithoutAction = () => void;
     // Unlike redux, the actions _can_ be anything
     type Reducer<S, A> = (prevState: S, action: A) => S;