Tag

React.memo

0 views collected around this technical thread.

Code Mala Tang
Code Mala Tang
Jul 13, 2024 · Frontend Development

Why Do Some React Child Components Re‑Render While Others Don’t?

This article explains how parent and child components interact in React, why certain child components re‑render on state changes, and how techniques like React.memo, useCallback, and useMemo can be used to control rendering performance.

Component Re-renderingPerformanceReAct
0 likes · 13 min read
Why Do Some React Child Components Re‑Render While Others Don’t?
Ctrip Technology
Ctrip Technology
Sep 15, 2022 · Frontend Development

Performance Optimization of Complex List Pages in Taro3

This article examines performance bottlenecks in a Taro3-based hotel list page, presents measurement data, and details multiple optimization techniques—including preload API, setData reduction, node count trimming, animation refactoring, data flattening, virtual list enhancements, custom wrapper usage, native components, and React.memo—to significantly improve rendering speed and user experience.

PerformanceReact.memoTaro
0 likes · 14 min read
Performance Optimization of Complex List Pages in Taro3
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Dec 9, 2021 · Frontend Development

Why Do Function Components Re‑Render? A Deep Dive into Hooks and Optimization

This article explains the three main reasons function components re‑render—useState/useReducer updates, parent updates, and context changes—and shows how to control unnecessary renders with techniques such as memoization, useCallback, useRef, and component extraction.

HooksReActReact.memo
0 likes · 12 min read
Why Do Function Components Re‑Render? A Deep Dive into Hooks and Optimization
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Aug 2, 2021 · Frontend Development

When to Use React.memo vs useMemo: A Practical Comparison

This article explains memoization, demonstrates why it matters in React, and provides side‑by‑side examples of React.memo and useMemo, showing how each technique can prevent unnecessary re‑renders and improve performance in functional components.

MemoizationPerformanceReAct
0 likes · 12 min read
When to Use React.memo vs useMemo: A Practical Comparison
ByteFE
ByteFE
Apr 26, 2021 · Frontend Development

Optimizing Long Page Rendering in React: Lazy Loading, Intersection Observer, and Memoization

This article explains how to improve performance of long React pages by rendering components screen‑by‑screen using viewport detection (getBoundingClientRect or Intersection Observer), grouping data, debouncing scroll handlers, and applying React.memo to prevent duplicate data requests.

Lazy LoadingReActReact.memo
0 likes · 9 min read
Optimizing Long Page Rendering in React: Lazy Loading, Intersection Observer, and Memoization
QQ Music Frontend Team
QQ Music Frontend Team
Mar 5, 2021 · Frontend Development

Boost React Performance: Master React.memo, useCallback & useMemo

An in‑depth guide explains how React.memo, useCallback, and useMemo work together to prevent unnecessary re‑renders, includes practical code examples, memoization concepts, source‑code analysis, and best‑practice recommendations for optimizing front‑end performance in modern.

PerformanceReActReact.memo
0 likes · 15 min read
Boost React Performance: Master React.memo, useCallback & useMemo
政采云技术
政采云技术
Nov 27, 2019 · Frontend Development

Improving React Performance: Reducing Unnecessary Renders

This article explains how React's virtual DOM and diff algorithm work, identifies situations where renders become costly, and presents practical techniques such as shouldComponentUpdate, PureComponent, higher‑order components, React.memo, and component splitting to reduce unnecessary renders and improve front‑end performance.

JavaScriptPerformanceReAct
0 likes · 13 min read
Improving React Performance: Reducing Unnecessary Renders