MemotivaBack to topic
Concurrent React and React 18

Concurrent React and React 18

Learn how to optimize your React applications for performance. This section covers performance optimization techniques, component lifecycle methods, and best practices to ensure your applications run smoothly and efficiently.

8 audio · 1:29

Nortren·

What is concurrent rendering in React?

0:11
Concurrent rendering is a set of features introduced in React 18 that let React prepare multiple versions of the UI at the same time. It enables interruptible rendering, transitions, and better responsiveness during heavy updates.

What is useTransition?

0:12
useTransition is a hook that marks a state update as a non-urgent transition. It returns a pending flag and a startTransition function, so React can keep the UI responsive during slower updates by interrupting them for urgent ones.

What is useDeferredValue?

0:11
useDeferredValue is a hook that returns a deferred copy of a value. React can prioritize rendering urgent updates first and defer re-rendering parts of the UI that depend on that value, improving perceived performance.

What is React Suspense?

0:11
Suspense is a React feature that lets a component wait for something, such as a lazily loaded component or data, and display a fallback UI in the meantime. It is commonly paired with React.lazy for code splitting.

What is React.lazy?

0:10
React.lazy is a function that lets you render a dynamically imported component as a regular component. It enables code splitting so that the component's code is only downloaded when it is first rendered.

What is StrictMode in React?

0:12
StrictMode is a development-only wrapper component that enables extra checks and warnings for its descendants. It helps detect unsafe lifecycles, deprecated APIs, and unexpected side effects by intentionally double-invoking certain functions.

Why does StrictMode double-invoke components in development?

0:11
StrictMode intentionally renders components, runs effects, and calls state setters twice in development to surface side effects that are not idempotent. This helps developers write components that behave correctly with concurrent rendering.

What is createRoot in React 18?

0:11
createRoot is the new API for mounting a React application to a DOM node in React 18. It replaces the older ReactDOM.render method and enables concurrent features like automatic batching and transitions. ---