react.dev

7.4 KiB

Raw Blame History

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!

7.4 KiB Raw Blame History