@types/react

@param — The value you want the context to have when there is no matching Provider in the tree above the component reading the context. This is meant as a "last resort" fallback.

@see — ://react.dev/reference/react/createContext#reference React Docs

@see — ://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet

@example — ```tsx import { createContext } from 'react';

const ThemeContext = createContext('light');

@see — ://react.dev/reference/react/forwardRef React Docs

@see — ://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet

@param — See the ForwardRefRenderFunction.

@template — The type of the DOM node.

@template — The props the component accepts, if any.

@example — ```tsx interface Props { children?: ReactNode; type: "submit" | "button"; }

export const FancyButton = forwardRef<HTMLButtonElement, Props>((props, ref) => ( {props.children} ));

@see — ://react.dev/reference/react/memo React Docs

@param — The component to memoize.

@param — 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 }) { // ... });

@see — ://react.dev/reference/react/lazy React Docs

@param — 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'));

@version — 16.8.0

@see — ://react.dev/reference/react/useContext

@version — 16.8.0

@see — ://react.dev/reference/react/useState

@version — 16.8.0

@see — ://react.dev/reference/react/useState

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

@version — 16.8.0

@see — ://react.dev/reference/react/useReducer

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

@version — 16.8.0

@see — ://react.dev/reference/react/useReducer

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

@version — 16.8.0

@see — ://react.dev/reference/react/useReducer

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

@version — 16.8.0

@see — ://react.dev/reference/react/useReducer

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values. It also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

@version — 16.8.0

@see — ://react.dev/reference/react/useReducer

Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

@version — 16.8.0

@see — ://react.dev/reference/react/useRef

Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

Usage note: if you need the result of useRef to be directly mutable, include | null in the type of the generic argument.

@version — 16.8.0

@see — ://react.dev/reference/react/useRef

Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

@version — 16.8.0

@see — ://react.dev/reference/react/useRef

Prefer the standard useEffect when possible to avoid blocking visual updates.

If you’re migrating code from a class component, useLayoutEffect fires in the same phase as componentDidMount and componentDidUpdate.

@version — 16.8.0

@see — ://react.dev/reference/react/useLayoutEffect

@param — Imperative function that can return a cleanup function

@param — If present, effect will only activate if the values in the list change.

@version — 16.8.0

@see — ://react.dev/reference/react/useEffect

useImperativeHandle should be used with React.forwardRef.

@version — 16.8.0

@see — ://react.dev/reference/react/useImperativeHandle

@version — 16.8.0

@see — ://react.dev/reference/react/useCallback

@version — 16.8.0

@see — ://react.dev/reference/react/useMemo

NOTE: We don’t recommend adding debug values to every custom hook. It’s most valuable for custom hooks that are part of shared libraries.

@version — 16.8.0

@see — ://react.dev/reference/react/useDebugValue

This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.

A good example of this is a text input.

@param — The value that is going to be deferred

@see — ://react.dev/reference/react/useDeferredValue

The useTransition hook returns two values in an array.

The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish. The second is a function that takes a callback. We can use it to tell React which state we want to defer.

If some state update causes a component to suspend, that state update should be wrapped in a transition.

@see — ://react.dev/reference/react/useTransition

@param — A synchronous function which causes state updates that can be deferred.

Ensures that the behavior in your tests matches what happens in the browser more closely by executing pending useEffects before returning. This also reduces the amount of re-renders done.

@param — A synchronous, void callback that will execute as a single, complete React commit.

@see — ://reactjs.org/blog/2019/02/06/react-v16.8.0.html#testing-hooks

@param — If present, effect will only activate if the values in the list change.

@see — ://github.com/facebook/react/pull/21913

@param —

@see — ://github.com/reactwg/react-18/discussions/86

Can be passed no type parameters to get a union of all possible components and tags.

Is a superset of ComponentType.

@template — The props to match against. If not passed, defaults to any.

@template — An optional tag to match against. If not passed, attempts to match against all possible tags.

@example — ```tsx // All components and tags (img, embed etc.) // which accept src type SrcComponents = ElementType<{ src: any }>;

@example — ```tsx
// All components
type AllComponents = ElementType;

@example — ```tsx // All custom components which match src, and tags which // match src, narrowed down to just audio and embed type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;

Similar to JSXElementConstructor, but with extra properties like defaultProps and contextTypes.

@template — The props the component accepts.

@see — ComponentClass

@see — FunctionComponent

Similar to ComponentType, but without extra properties like defaultProps and contextTypes.

@template — The props the component accepts.

Created by createRef, or useRef when passed null.

@template — The type of the ref's value.

@example — ```tsx const ref = createRef();

ref.current = document.createElement('div'); // Error

@template — The type of the ref's value.

@see — ://react.dev/reference/react-dom/components/common#ref-callback React Docs

@example — ```tsx

@see — RefCallback

@see — RefObject

@see — ://react.dev/reference/react/Component#refs React Docs

@example — ```tsx

@template — The component type.

@example — ```tsx type MyComponentRef = React.ElementRef;

@example — ```tsx
type DivRef = React.ElementRef<'div'>;

@see — ://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs

const Component = () => <div />;
<Component key="one" />

WARNING: The implementation of a component will never have access to these attributes. The following example would be incorrect usage because Component would never have access to key:

const Component = (props: React.Attributes) => props.key;

const Component = forwardRef(() => <div />);
<Component ref={(current) => console.log(current)} />

You only need this type if you manually author the types of props that need to be compatible with legacy refs.

interface Props extends React.RefAttributes<HTMLDivElement> {}
declare const Component: React.FunctionComponent<Props>;

Otherwise it's simpler to directly use Ref since you can safely use the props type to describe to props that a consumer can pass to the component as well as describing the props the implementation of a component "sees". RefAttributes is generally not safe to describe both consumer and seen props.

interface Props extends {
  ref?: React.Ref<HTMLDivElement> | undefined;
}
declare const Component: React.FunctionComponent<Props>;

WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs. The following example would be incorrect usage because Component would never have access to a ref with type string

const Component = (props: React.RefAttributes) => props.ref;

Where ReactNode represents everything that can be rendered, ReactElement only represents JSX.

@template — The type of the props object

@template — The type of the component or tag

@example — ```tsx const element: ReactElement = ;

@deprecated — This type is not relevant when using React. Inline the type instead to make the intent clear.

Where ReactElement only represents JSX, ReactNode represents everything that can be rendered.

@see — ://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet

@example — ```tsx // Typing children type Props = { children: ReactNode }

const Component = ({ children }: Props) => {children}

hello

@example — ```tsx
// Typing a custom element
type Props = { customElement: ReactNode }
const Component = ({ customElement }: Props) => <div>{customElement}</div>
<Component customElement={<div>hello</div>} />

@template — The type of the value the context provides.

@template — The type of the value the context provides.

In order to make TypeScript work, we pretend that they are normal components.

But they are, in fact, not callable - instead, they are objects which are treated specially by the renderer.

@template — The props the component accepts.

@template — The props the component accepts.

@template — The props the component accepts.

@template — The context object.

@example — ```tsx import { createContext } from 'react';

const MyContext = createContext({ foo: 'bar' });

type ContextType = ContextType; // ContextType = { foo: string }

@see — ://react.dev/reference/react/createContext#provider React Docs

@example — ```tsx import { createContext } from 'react';

const ThemeContext = createContext('light');

function App() { return ( <ThemeContext.Provider value="dark"> </ThemeContext.Provider> ); }

@see — ://react.dev/reference/react/createContext#consumer React Docs

@example — ```tsx import { UserContext } from './user-context';

function Avatar() { return ( <UserContext.Consumer> {user => } </UserContext.Consumer> ); }

Created from createContext

@see — ://react.dev/learn/passing-data-deeply-with-context React Docs

@see — ://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet

@example — ```tsx import { createContext } from 'react';

const ThemeContext = createContext('light');

@see — ://react.dev/reference/react/Fragment React Docs

@example — ```tsx import { Fragment } from 'react';

@example — ```tsx // Using the <></> shorthand syntax:

<>

@see — ://react.dev/reference/react/StrictMode React Docs

@example — ```tsx import { StrictMode } from 'react';

@see — ://react.dev/reference/react/Suspense React Docs

@see — ://react.dev/reference/react/Suspense React Docs

@example — ```tsx import { Suspense } from 'react';

<Suspense fallback={}>

@see — ://react.dev/reference/react/Profiler#onrender-callback React Docs

@see — ://react.dev/reference/react/Profiler React Docs

@see — ://react.dev/reference/react/Profiler#onrender-callback React Docs

@example — ```tsx

@see — ://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs

@see — ://www.npmjs.com/package/create-react-class create-react-class on npm

@template — The props the component accepts.

@see — ://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet

@alias — for FunctionComponent

@example — ```tsx // With props: type Props = { name: string }

const MyComponent: FC = (props) => { return {props.name} }

@example — ```tsx
// Without props:
const MyComponentWithoutProps: FC = () => {
  return <div>MyComponentWithoutProps</div>
}

@template — The props the component accepts.

@see — ://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet

@example — ```tsx // With props: type Props = { name: string }

const MyComponent: FunctionComponent = (props) => { return {props.name} }

@example — ```tsx
// Without props:
const MyComponentWithoutProps: FunctionComponent = () => {
  return <div>MyComponentWithoutProps</div>
}

@see — FunctionComponent

@alias — VoidFunctionComponent

@see — FunctionComponent

@see — ForwardRefRenderFunction