State of React 2023

createContext lets you create a context that components can provide or read.

const SomeContext = createContext(defaultValue)

createPortal lets you render some children into a different part of the DOM.

<div>
  <SomeComponent />
  {createPortal(children, domNode, key?)}
</div>

forwardRef lets your component expose a DOM node to parent component with a ref.

const SomeComponent = forwardRef(render)

<Fragment>, often used via <>...</> syntax, lets you group elements without a wrapper node.

<>
  <OneChild />
  <AnotherChild />
</>

lazy lets you defer loading component’s code until it is rendered for the first time.

memo lets you skip re-rendering a component when its props are unchanged.

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

<Profiler> lets you measure rendering performance of a React tree programmatically.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

<StrictMode> lets you find common bugs in your components early during development.

<StrictMode>
  <App />
</StrictMode>

1/11Main APIs