React APIs

Under Construction

This section is incomplete, please see the old docs for React.

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.

Terminal
npm install react
// 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

Verifica que el objeto es un elemento de React:

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');