react.dev/beta/src/content/apis/react/index.md

title

title
React APIs

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 {/installation/}

It is available as react on npm. You can also add React to the page as a <script> tag.

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 {/exports/}

State {/state/}

Declares a state variable.

function MyComponent() {
  const [age, setAge] = useState(42);
  // ...

Declares a state variable managed with a reducer.

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...

Context {/context/}

Reads and subscribes to a context.

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

Creates a context that components can provide or read.

const ThemeContext = createContext('light');

Refs {/refs/}

Declares a ref.

function MyComponent() {
  const inputRef = useRef(null);
  // ...

Create a component that forward the ref attribute:

const Component = forwardRef((props, ref) => {
    // ...
});

Customize instance value exposed to parent refs:

useImperativeHandle(ref, () => {
  // ...        
});

Create a ref (typically for class components):

this.ref = createRef(); 

Components {/components/}

Define a components as a class:

class MyComponent extends React.Component {
  // ...
}

Define a pure component as a class:

class MyComponent extends React.PureComponent {
    // ...
}

Elements {/elements/}

Return multiple elements:

function MyComponent() {
    return (
        <>
            <h1>Title</h1>
            <h2>Subtitle</h2>
        </>
    );
}

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

Create a React element:

React.createElement('div', { title: 'Element'});

Create a factory for React elements of a given type:

React.createFactory('div');

Clone a React element:

React.cloneElement(element, props);

Verifies the object is a React element:

React.isValidElement(object)

Suspense {/suspense/}

Define a component that is loaded dynamically:

const SomeComponent = React.lazy(() => import('./SomeComponent'));

Define Suspense boundaries:

<React.Suspense fallback={<Spinner />}>
  //...
</React.Suspense>

Transitions {/transitions/}

Mark updates as transitions:

startTransition(() => {
  setState(c => c + 1);
});

Mark updates as transitions with pending flags:

const [isPending, startTransition] = useTransition();

Defer to more urgent updates:

const deferredValue = useDeferredValue(value);

Effects {/effects/}

Synchronize external state:

useEffect(() => {
  const unsubscribe = socket.connect(props.userId);
    
  return () => {
    unsubscribe();
  }
}, [props.userId])

Read layout DOM state:

useLayoutEffect(() => {
  // Read DOM layout
})

Insert styles into the DOM.

useInsertionEffect(() => {
  // Insert styles
})

Memoization {/memoization/}

Return a memoized callback.

const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Return a memoized value.

const value = useMemo(() => {
  return calculateValue(a, b);
}, [a, b]);

Return a memoized component.

const MyComponent = React.memo(function MyComponent(props) {
    // ...
});

Subscribing {/subscribing/}

Subscribe to external state.

const state = useSyncExternalStore(subscribe, getSnapshot);

Accessibility {/accessibility/}

Generate unique IDs across the server and client:

const id = useId();

Debugging {/devtools/}

Eagerly highlight potential problems.

<StrictMode>{...}</StrictMode>

Display a label for custom hooks.

useDebugValue('Custom Label');

This section is incomplete and is still being written!