React Components and Hooks

The following are snippets notes from State of React 2023 survey

Components

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

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

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

<Suspense> lets you display a fallback until its children have finished loading.

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

useCallback is a React Hook that lets you cache a function definition between re-renders.

const cachedFn = useCallback(fn, dependencies);

useContext is a React Hook that lets you read and subscribe to context from your component.

const value = useContext(SomeContext);

useDebugValue is a React Hook that lets you add a label to a custom Hook in React DevTools.

useDebugValue(value, format?)

useDeferredValue is a React Hook that lets you defer updating a part of the UI.

const deferredValue = useDeferredValue(value);

useEffect is a React Hook that lets you synchronize a component with an external system.

useEffect(setup, dependencies?)

useId is a React Hook for generating unique IDs that can be passed to accessibility attributes.

const id = useId();

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

const cachedValue = useMemo(calculateValue, dependencies);

const [state, dispatch] = useReducer(reducer, initialArg, init?)

useRef is a React Hook that lets you reference a value that’s not needed for rendering.

const ref = useRef(initialValue);

useState is a React Hook that lets you add a state variable to your component.

const [state, setState] = useState(initialState);

useSyncExternalStore is a React Hook that lets you subscribe to an external store.

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

useTransition is a React Hook that lets you update the state without blocking the UI.

const [isPending, startTransition] = useTransition();