Tag

React 18

1 views collected around this technical thread.

ByteFE
ByteFE
Dec 7, 2022 · Frontend Development

React 18 Streaming SSR and Selective Hydration Introduction

React 18 introduces Streaming SSR and Selective Hydration, enabling faster initial page rendering and more efficient hydration by only rendering necessary components.

JavaScriptReactReact 18
0 likes · 25 min read
React 18 Streaming SSR and Selective Hydration Introduction
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 5, 2022 · Frontend Development

React 18 New Features, Upgrade Guide, and API Changes

This article provides a comprehensive overview of React 18, covering its release timeline, migration steps, new APIs such as the root API, useId, useSyncExternalStore and useInsertionEffect, automatic state batching, flushSync, updated Strict Mode and Suspense behavior, concurrent mode concepts, and practical code examples for developers upgrading from React 17.

Concurrent ModeHooksReact
0 likes · 22 min read
React 18 New Features, Upgrade Guide, and API Changes
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Mar 28, 2022 · Frontend Development

Unlock React 18: 4 Game-Changing Features Every Frontend Developer Must Know

This article explains React 18’s four major innovations—Automatic Batching, Concurrent APIs, Server‑Side Rendering for Suspense, and the new Render API—showing how they improve rendering performance, enable concurrent UI updates, and simplify hydration in modern web applications.

Automatic BatchingConcurrent APIsNew Render API
0 likes · 11 min read
Unlock React 18: 4 Game-Changing Features Every Frontend Developer Must Know
Sohu Tech Products
Sohu Tech Products
Sep 22, 2021 · Frontend Development

Introducing the React Scheduling Profiler: New Performance Analysis Features for React 18

The React team has open‑sourced the Scheduling Profiler, a new tool that extends the classic Profiler by visualizing component scheduling, priority handling, transitions, and Suspense behavior, helping developers diagnose rendering delays and optimize performance in React 18 applications.

Performance ProfilingReactReact 18
0 likes · 4 min read
Introducing the React Scheduling Profiler: New Performance Analysis Features for React 18
ByteFE
ByteFE
Aug 26, 2021 · Frontend Development

Why React Keys Matter: The Hidden Bug in Dynamic Forms

This article explains why React keys are crucial when rendering lists, demonstrating through a dynamic form example how using array indices as keys can cause bugs when items are added or deleted.

ReactReact 18State Management
0 likes · 6 min read
Why React Keys Matter: The Hidden Bug in Dynamic Forms
KooFE Frontend Team
KooFE Frontend Team
Aug 23, 2021 · Frontend Development

How to Upgrade Your Server‑Side Rendering to React 18: New APIs & Best Practices

This guide explains how to migrate a React server‑side rendering setup to React 18 by installing the latest version, replacing renderToString with pipeToNodeWritable, and adopting the new API surface while handling Suspense and streaming nuances.

API MigrationReactReact 18
0 likes · 7 min read
How to Upgrade Your Server‑Side Rendering to React 18: New APIs & Best Practices
KooFE Frontend Team
KooFE Frontend Team
Aug 9, 2021 · Frontend Development

Why React 18’s Strict Effects Matter and How to Use Them

React 18 extends StrictMode with Strict Effects, causing newly mounted components to run their effects twice in development to surface hidden bugs, while offering guidance on when to enable or disable this behavior for reliable UI state management.

ReactReact 18Strict Effects
0 likes · 6 min read
Why React 18’s Strict Effects Matter and How to Use Them
KooFE Frontend Team
KooFE Frontend Team
Aug 4, 2021 · Frontend Development

React 18: Legacy render vs New createRoot – What’s the Difference?

This article explains the differences between React 18’s legacy ReactDOM.render root API and the new ReactDOM.createRoot API, covering concepts of roots, hydration, rendering callbacks, and why both APIs are maintained, with code examples for each approach.

ReactReact 18createRoot
0 likes · 7 min read
React 18: Legacy render vs New createRoot – What’s the Difference?
KooFE Frontend Team
KooFE Frontend Team
Jul 7, 2021 · Frontend Development

How React 18’s Automatic Batching Reduces Renders and Boosts Performance

React 18 introduces automatic batching that merges multiple state updates into a single render across all contexts—including promises, timeouts, and native events—improving performance while offering opt‑out mechanisms like flushSync for rare cases where immediate DOM updates are required.

Automatic BatchingHooksPerformance
0 likes · 13 min read
How React 18’s Automatic Batching Reduces Renders and Boosts Performance
Taobao Frontend Technology
Taobao Frontend Technology
Jul 6, 2021 · Frontend Development

What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense

React 18 introduces a progressive upgrade path with concurrent rendering, automatic batching, a new Root API, startTransition, and an improved Suspense SSR architecture, allowing developers to adopt new features with minimal code changes while enhancing performance and enabling selective hydration and streaming HTML.

Automatic BatchingConcurrent RenderingReact
0 likes · 12 min read
What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense