React APIs

Fresh

Beyond hooks and components, React exports several APIs you use to define components and work with them.

createContext

Creates a context that components can provide or read.

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

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

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click me</button>;
}

Parameters:

• defaultValue - The value used when there is no matching Provider above in the tree

Returns: A context object with:

• SomeContext.Provider - Wraps components to provide a context value
• SomeContext.Consumer - Legacy way to read context (use useContext instead)

memo

Skips re-rendering a component when its props are unchanged.

import { memo } from 'react';

const Greeting = memo(function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
});

React normally re-renders a component whenever its parent re-renders. With memo, React will skip re-rendering if all props are the same as during the last render (compared with Object.is).

Custom comparison function:

const Chart = memo(function Chart({ dataPoints }) {
  // ...
}, (prevProps, nextProps) => {
  return prevProps.dataPoints.length === nextProps.dataPoints.length;
});

When memo is Useless

• The component always receives different props (e.g., an object or function created during rendering)
• Props include state that changes frequently

With React Compiler, manual memo becomes unnecessary in most cases.

forwardRef

Lets your component expose a DOM node to a parent component with a ref.

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  return <input {...props} ref={ref} />;
});

// Parent can now access the input DOM node
function Form() {
  const inputRef = useRef(null);
  return <MyInput ref={inputRef} />;
}

lazy

Defers loading a component's code until it is rendered for the first time.

import { lazy, Suspense } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  return (
    <Suspense fallback={<Loading />}>
      <MarkdownPreview />
    </Suspense>
  );
}

lazy returns a React component you can render in your tree. While the code is loading, rendering it will suspend. Use <Suspense> to display a loading indicator.

startTransition

Updates state without blocking the UI.

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
}

Unlike useTransition, startTransition does not provide an isPending flag. Use it outside of components (e.g., from a data library).

cache (Experimental)

Caches the result of a data fetch or computation.

import { cache } from 'react';

const getUser = cache(async (id) => {
  const response = await fetch(`/api/user/${id}`);
  return response.json();
});

// Multiple components can call getUser with the same id
// and only one fetch will be made

act (Testing)

Wraps code that triggers React updates in tests to ensure all pending updates are processed:

import { act } from 'react';

test('renders correctly', async () => {
  await act(async () => {
    root.render(<App />);
  });
  // assertions here
});

isValidElement

Checks whether a value is a React element:

import { isValidElement } from 'react';

isValidElement(<p>Hello</p>);  // true
isValidElement('Hello');        // false
isValidElement(42);             // false

Children

Manipulates and transforms the JSX received as the children prop:

import { Children } from 'react';

function RowList({ children }) {
  return (
    <div className="RowList">
      {Children.map(children, child => (
        <div className="Row">{child}</div>
      ))}
    </div>
  );
}

WARNING

Using Children is uncommon and can lead to fragile code. Consider alternatives like accepting an array of items as a prop.