React APIs
The React package contains all the APIs necessary to define and use components.
Installation
It is available as react on npm. You can also add React to the page as a <script> tag.
// Importing a specific API:
import { useState } from 'react';
// Importing all APIs together:
import * as React from 'react';If you use React on the web, you’ll also need the same version of ReactDOM.
Exports
State
useState
Declares a state variable.
function MyComponent() {
const [age, setAge] = useState(42);
// ...useReducer
Declares a state variable managed with a reducer.
function MyComponent() {
const [state, dispatch] = useReducer(reducer, { age: 42 });
// ...Context
useContext
Reads and subscribes to a context.
function MyComponent() {
const theme = useContext(ThemeContext);
// ...createContext
Creates a context that components can provide or read.
const ThemeContext = createContext('light');Refs
useRef
Declares a ref.
function MyComponent() {
const inputRef = useRef(null);
// ...forwardRef
Create a component that forwards the ref attribute:
const Component = forwardRef((props, ref) => {
// ...
});useImperativeHandle
Customize instance value exposed to parent refs:
useImperativeHandle(ref, () => {
// ...
});createRef
Create a ref (typically for class components):
this.ref = createRef();Components
React.Component
Define a components as a class:
class MyComponent extends React.Component {
// ...
}React.PureComponent
Define a pure component as a class:
class MyComponent extends React.PureComponent {
// ...
}Elements
Fragment
Return multiple elements:
function MyComponent() {
return (
<>
<h1>Title</h1>
<h2>Subtitle</h2>
</>
);
}Children
Utilities for dealing with props.children:
React.Children.map(children, () => ([]));
React.Children.forEach(children, () => {});
React.Children.count(children);
React.Children.only(children);
React.Children.toArray(children);createElement
Create a React element:
React.createElement('div', { title: 'Element'});createFactory
Create a factory for React elements of a given type:
React.createFactory('div');cloneElement
Clone a React element:
React.cloneElement(element, props);isValidElement
Verifies the object is a React element:
React.isValidElement(object);Suspense
React.lazy
Define a component that is loaded dynamically:
const SomeComponent = React.lazy(() => import('./SomeComponent'));Suspense
Define Suspense boundaries:
<React.Suspense fallback={<Spinner />}>
//...
</React.Suspense>Transitions
startTransition
Mark updates as transitions:
startTransition(() => {
setState(c => c + 1);
});useTransition
Mark updates as transitions with pending flags:
const [isPending, startTransition] = useTransition();useDeferredValue
Defer to more urgent updates:
const deferredValue = useDeferredValue(value);Effects
useEffect
Synchronize external state:
useEffect(() => {
const unsubscribe = socket.connect(props.userId);
return () => {
unsubscribe();
}
}, [props.userId]);useLayoutEffect
Read layout DOM state:
useLayoutEffect(() => {
// Read DOM layout
});useInsertionEffect
Insert styles into the DOM.
useInsertionEffect(() => {
// Insert styles
});Memoization
useCallback
Return a memoized callback.
const handleClick = useCallback(() => {
doSomething(a, b);
}, [a, b]);useMemo
Return a memoized value.
const value = useMemo(() => {
return calculateValue(a, b);
}, [a, b]);memo
Return a memoized component.
const MyComponent = React.memo(function MyComponent(props) {
// ...
});Subscribing
useSyncExternalStore
Subscribe to external state.
const state = useSyncExternalStore(subscribe, getSnapshot);Accessibility
useId
Generate unique IDs across the server and client:
const id = useId();Debugging
StrictMode
Eagerly highlight potential problems.
<StrictMode>{...}</StrictMode>useDebugValue
Display a label for custom hooks.
useDebugValue('Custom Label');