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.
This roundup covers Yarn 3.0’s breaking changes and new features, VS Code’s built‑in DevTools debugging, a React recreation of Windows 11, a type‑safe Clipanion CLI library, a Node.js CLI best‑practice guide, Sandpack, Infima, Benny benchmark tool, plus articles on Next.js pre‑rendering, micro‑frontend routing hijack, and React Native’s architecture upgrade.
This article explains the technical details of large file chunked uploading, walks through designing a custom TypeScript library for both server and client sides, provides step‑by‑step implementation code, and demonstrates a complete Koa‑React demo, offering developers a ready‑to‑use solution for efficient large file transfers.
This article introduces a React‑based recreation of Windows 11’s user interface, detailing its features, technology stack, and how developers can experience the new OS look without reinstalling, along with links to the source code and live demo.
This article provides a comprehensive guide to building a large file chunked upload library from scratch using TypeScript, detailing both server-side stream processing for memory efficiency and client-side MD5 calculation with retry mechanisms to ensure reliable and performant file transfers.
This article explains how Vite leverages native ESM, middleware, and a series of plugins to enable fast development and hot module replacement for React projects, covering setup, source code transformation, import analysis, and the @vitejs/plugin-react-refresh workflow.
This article explains Taro 3's shift from a compile‑time heavy architecture to an interpretive runtime, detailing its JSX compilation drawbacks, the new runtime design that supports multiple frameworks, the implementation of a custom React reconciler, Web Components via Stencil, and how these changes improve cross‑platform development performance and flexibility.
This article explains the drawbacks of weakly‑typed JavaScript, outlines the advantages of adopting TypeScript, and provides practical guidance on configuring ESLint, Prettier, tsconfig, and React component typings—including hooks, event handling, and generic utilities—to improve code quality and developer productivity.
This article shares practical tips, patterns, and mental models for mastering styled-components in React, covering CSS variables, context styling, component encapsulation, inheritance, margin handling, z-index management, the "as" prop, priority tricks, and related tooling to write cleaner, more maintainable UI code.
This article explains the core concepts, basic usage, nested routing, parameter handling, Switch behavior, browser and hash modes, underlying path‑to‑regexp dependency, and integration with Dva, providing practical code examples and best‑practice recommendations for React Router in modern single‑page applications.
The article explains how Airbnb’s visx library, built on React and D3 primitives, addresses the need for a lightweight, highly expressive, and performant front‑end visualization solution by offering modular packages, TypeScript safety, and seamless integration with existing React codebases.
This article examines the performance bottlenecks of a Taro3 mini‑program list page after migrating from Taro1, analyzes causes such as excessive node rendering and large setState payloads, evaluates backend pagination and the built‑in virtual list, and presents a custom virtual‑list implementation that reduces rendered nodes, uses screen‑height placeholders, and achieves roughly 45% faster rendering and 50% quicker interaction response.
This article explains what the Virtual DOM is, why it improves performance, how React implements it through ReactElements and Fiber, and details the diff algorithm and reconciliation process that enable efficient UI updates in modern frontend development.
This article provides a comprehensive overview of rc-form, a React library used by Ant Design to manage form state, validation, and data collection, explaining why it is needed, its core APIs, practical usage examples, and a deep dive into its internal implementation.
In this extensive live interview, React core maintainer Dan discusses his programming origins, the philosophy behind React state management and Hooks, practical advice for newcomers, the challenges of Concurrent Mode and Server Components, and his vision for React’s evolution and competitiveness.
This article examines a common React progress‑bar component, explains why the naïve timer‑based implementation causes heavy reflows and repaints, and presents a GPU‑accelerated CSS animation solution that dramatically improves frame rates and reduces layout work.
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.
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.
This article explains how React 18 introduces progressive upgrades, a new Root API, automatic batching, the flushSync utility, an enhanced Suspense SSR architecture, and the startTransition API, providing code examples and practical guidance for developers transitioning from earlier React versions.
Umajs-react-ssr is a lightweight isomorphic SSR solution built on the Umajs Node.js framework that enables React page components to be rendered on both server and client, offering flexible routing, server‑side data fetching, custom HTML templates, CSS‑module support, and easy configuration for improved performance and developer experience.
This article introduces EMP, a micro‑frontend solution that helps developers build production‑ready micro‑frontend architectures more easily and efficiently by addressing large bundle sizes, team collaboration, and module sharing, and provides detailed usage scenarios, ecosystem support, configuration examples, upgrade guides, and performance comparisons.
This article explains why React Hooks were introduced, walks through the fundamentals of useState and useEffect with clear code examples, and demonstrates how Hooks simplify state management, side‑effects, and component logic compared to traditional class components, enabling more maintainable frontend development.
This article reviews Google’s CSS fundamentals course, dives into React 18’s automatic batching, the new Suspense SSR architecture, the startTransition API, suggests a lightweight VS Code API client, and explains the basics of building user profiles for recommendation systems.
The article analyzes the background of mini‑program development, compares cross‑platform conversion frameworks, explains why Nanachi was selected for its small package size and native‑project mixing support, details its architecture, outlines conversion issues and solutions, and presents the overall static translation workflow and results.
This article explores why React moved from class components to the Hooks API, explains its functional‑programming roots, compares Hooks with Redux, Mixins, HOCs, Vue's Composition API, and demonstrates how TypeScript type inference and codata concepts can deepen understanding while providing practical code examples.
This article reviews the 2021 top five frontend JavaScript frameworks—React, Vue, Angular, Ember, and Preact—based on Stack Overflow surveys, State of JS, and NPM trends, explaining their origins, features, and adoption by major companies.
This article explains what immutable data structures are, outlines their advantages such as reduced complexity, memory savings, easy state rollback, and functional programming benefits, and demonstrates practical usage of Immutable.js in React components and Redux integration with code examples and best‑practice tips.
Tenon is a lightweight MVVM framework built on Didi's Hummer runtime that bridges the Web ecosystem (Vue 3 and React) with native Android and iOS, offering multi‑framework support, easy adoption, extensible plugins, high availability, and a three‑layer architecture illustrated by real‑world Didi case studies.
This article explains how React synthetic events emulate native DOM events, details the event system architecture, provides core registration and execution code, demonstrates mixing with native events, and discusses the benefits and known issues of the synthetic event model.
This article explains the concept of Capture Value in React Hooks, demonstrates the issue with asynchronous state updates using a button example, and shows how to resolve it with useRef, while also providing a simplified custom hook implementation and deeper insight into hook internals.
This article details the technical implementation of NetEase Cloud Music’s color‑test H5, covering its single‑page React architecture, preloading optimizations, canvas and WebGL animation techniques, and the deterministic front‑end algorithm that calculates single‑ or dual‑color results from user choices.
This article reviews common web animation techniques for mobile projects—including GIF/APNG, CSS3, JavaScript, Lottie, SVG, and Canvas—offering practical tips, performance considerations, Vue and React implementations, and reusable code patterns to help developers confidently meet designers' animation requirements.
This article reviews the paper “Build Systems à la Carte”, explains its abstract build‑system model, shows how incremental computation concepts apply to tools such as Excel, React, Recoil, module loaders and dependency injection, and demonstrates a TypeScript translation of the core ideas for front‑end developers.
This article explains how to build a rotating 3D coin effect for a web page using CSS3 animations, @keyframes, LESS variables and loops, and a React component that generates the coin's faces and edges, providing a visual cue to attract users to an activity.
This article describes how to reduce the cost of adding multilingual support to existing React components by using the company's translate‑cli, an international translation platform, and the react‑intl‑universal library, together with a custom CLI built on commander and jscodeshift to automate code migration.
This article explains how React’s functional nature, rooted in pure functions and side‑effect management, leads to the design of Hooks such as useState and useEffect, and walks through their implementation details and practical considerations.
This article explains the origins of Recoil, why existing tools like Redux, React's built‑in state, and Context fall short for complex shared and derived state scenarios, and how Recoil's atom‑selector architecture, including async selectors and application‑level state observation, addresses flexibility, performance, and robustness in modern React applications.
React Fiber rewrites React’s core algorithm by breaking the diff phase into small, interruptible fiber units, scheduling them during browser idle time with requestIdleCallback, using double‑buffered trees and effect lists to pause, resume, and efficiently commit DOM updates, thereby improving UI responsiveness in large applications.
This article demonstrates how to leverage the @vue/reactivity package inside React by creating a custom useReactive hook for function components and a reactiveHoc higher‑order component for class components, explaining the underlying concepts, implementation steps, and practical usage with full code examples.
This article examines the evolution of frontend request libraries—from jQuery Ajax to modern hook-based solutions like useRequest, SWR, and react-query—highlighting their simplified loading state handling, cache mechanisms, refetching, and mutate features, and comparing their design differences with class components.
China’s low‑code market, valued at CNY 1.9 billion in 2020 and projected to hit a hundred‑billion by 2024, is booming as enterprises like iQIYI adopt visual development platforms that abstract reusable components, accelerate activity page creation, and address integration, modularity, and business‑driven platform design challenges.
This article introduces the Hippy cross‑platform framework, outlines its key features for React and Vue developers, details its project layout, and provides step‑by‑step environment preparation and build instructions for iOS and Android applications.
This tutorial demonstrates how to build a Markdown editor using ByteMD, including setting up plugins for enhanced functionality and customization.
A React component that works locally threw a minified "#31" error only on Vivo X7 Android 5.1 devices because a Symbol polyfill loaded after React caused a mismatch in REACT_ELEMENT_TYPE, and adjusting the build order or JSX runtime resolved the illegal return‑value bug.
This tutorial walks through why catching front‑end component errors is essential, demonstrates how to implement a custom React ErrorBoundary with flexible fallback options, reset logic, higher‑order component wrappers, and hooks, and provides complete TypeScript examples and best‑practice summaries.
This article explores the evolution of front‑end performance optimization, compares SPA and SSR architectures, introduces a Node‑based middle‑layer design, and details the CarNext framework built on Next.js that improves rendering speed, SEO friendliness, and development efficiency for 58.com’s automotive services.
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.
This article details how to create a cross‑platform English‑learning quiz PK mini‑game for both a main app (H5) and WeChat mini‑games, covering technology selection, project structure, webpack configuration, virtual routing, component development with react‑pixi‑fiber, animation techniques, platform adapters, and performance optimizations.
This article explains JavaScript’s scope types, execution context, activation objects, and the lifecycle of functions, illustrating how closures retain memory, how garbage collection works, and provides practical solutions for common closure pitfalls in React functional components.
The Dolphin system introduces a native‑plus‑H5, component‑based architecture using React to meet JD International’s personalized channel requirements, improve performance, enable cross‑platform configuration, and provide a secure, real‑time, and isolated solution for dynamic page rendering.
This guide covers the essential TypeScript knowledge for React development, demonstrating how to import React, declare functional components with React.FC, use core hooks such as useState, useRef, useEffect, useMemo, create custom hooks, handle defaultProps, choose between type and interface, type props, manage forms and events, work with operators, and apply generic patterns for reusable components.
This article explains how React registers event listeners on the root, extracts events from the fiber tree, synthesizes cross‑browser synthetic events, accumulates callbacks, and finally dispatches them, illustrating each step with code examples and diagrams.
Recoil, Facebook’s experimental state‑management library for React, offers a hook‑based, orthogonal approach that reduces overhead compared to Redux and MobX, supports both synchronous and asynchronous selectors, provides utilities like atomFamily and selectorFamily, and integrates seamlessly with React’s concurrent features, making it a promising frontend solution.
This article explains the principles of streaming server‑side rendering (SSR) in React, compares it with traditional client‑side rendering, and demonstrates how lazy loading and Suspense can be used together with streaming SSR to parallelize data and JavaScript delivery for faster first‑paint and improved user experience.
This article explores the motivations behind React's Hooks API, contrasts it with the traditional Class API, delves into functional programming concepts, demonstrates practical implementations with Redux, Mixins, HOCs, custom Hooks, TypeScript type inference, codata theory, and compares React Hooks to Vue's Composition API, providing code examples and visual diagrams throughout.
This article walks through building a basic front‑end router with vanilla JavaScript, then dissects React Router’s source code—including BrowserRouter, HashRouter, Router, Route, and matchPath—explaining their implementations, the history library, and how they improve routing compared to native approaches.
The article explains how Notion implements a block‑tree data model and a controlled contenteditable editor using React, detailing the data layer, operation (op) system, rendering components, selection handling, text styling, and copy‑paste mechanisms, all backed by transactional undo/redo logic.
This article explores the motivations behind React's Hooks API, contrasts it with the Class API, delves into functional programming concepts, demonstrates implementations via Mixins, HOCs, and custom hooks, and compares React Hooks to Vue's Composition API, offering deep insights for front‑end developers.
This article explains why list pages lose state in H5 applications, discusses the reasons behind it, compares Vue's keep-alive and React's lack of built‑in support, and presents a practical CacheHoc solution with code examples for storing list data and scroll positions using window storage.
This article reviews practical techniques for writing cleaner React components, covering anti‑patterns like prop spreading, using object parameters, curried event handlers, preferring map over if/else, leveraging custom hooks, and splitting components with wrappers, separation of concerns, and dedicated files to improve readability and scalability.
This article explains a joint cross‑platform approach that lets developers share a single codebase across PC browsers, mobile web, and app WebViews by exposing adaptable UI and logic layers, using custom adapters and build tools to generate platform‑specific bundles while preserving existing tech stacks.
This article explains why React introduced the Fiber architecture, how it breaks rendering work into interruptible units, compares it with Vue's approach, and provides detailed code examples of Fiber's data structures, scheduling, traversal, and commit phases.
This article explains how React 16 introduced the Fiber architecture to replace synchronous VDOM rendering, using operating‑system‑style interrupt mechanisms, RequestIdleCallback scheduling and task splitting to improve rendering performance and user experience in modern browsers.
This article details the technical design and implementation of an IDC digital‑twin platform, covering business requirements, a three‑dimensional interactive framework built on React and ThreeJS, component architecture, user interaction, visual rendering, performance optimizations, and future development plans.
This article examines the challenges of virtualizing large Ant Design tables in a React+Umi stack, outlines three internal implementation strategies, discusses common pitfalls such as blank flicker and column fixing, and recommends open‑source alternatives for efficient table rendering.
This article explains why React introduced the Fiber architecture, how it breaks rendering work into small interruptible units, the role of requestAnimationFrame and requestIdleCallback, the underlying linked‑list data structures, and provides code examples that illustrate the render and commit phases for smoother UI updates.
This article compiles a curated list of more than seventy open‑source clone projects—ranging from 2048 and Airbnb to Netflix and TikTok—providing live demos, source‑code links, and technology‑stack details to help developers learn modern frontend techniques.
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.
Integrating a React front‑end with a Java back‑end required fixing HTTPS‑to‑HTTP CORS errors by serving the React index.html from the backend, switching @RestController to @Controller for sub‑path routing, adding Thymeleaf, using a Chrome redirect plugin and crossorigin tags, and disabling lazy‑loaded asset URLs during local development, highlighting that true front‑end/back‑end separation remains elusive.
This article reviews React Hooks, compares them with class components, demonstrates change‑driven coding with practical examples, introduces marble diagrams for visualizing state flows, and explores advanced patterns like custom hooks, immutable data handling, and global state management for more maintainable frontend development.
This article explores the challenges of building business UI components across PC, mobile, and mini‑app platforms, details a unified fusion development approach using React, Rax, and Alibaba’s Fusion toolchain, and shares practical solutions for tooling, build pipelines, and automated component publishing.
This article details the technical implementation of Next.js SSR for international projects, covering custom routing, data fetching, Material UI integration, SEO optimization, and special considerations for overseas markets including Google Recaptcha and internationalization.
This article explains common frontend exceptions such as UI glitches, script errors, and network failures, classifies JavaScript error types, demonstrates handling techniques using try‑catch, finally, window.onerror, event listeners, Promise rejection handling, and framework‑specific solutions like React error boundaries, Vue errorHandler, and Axios interceptors.
This article provides a comprehensive analysis of form handling in React, covering the fundamentals of forms, the official controlled and uncontrolled approaches, and a detailed comparison of major community libraries such as rc-form, rc-field-form, Formik, React‑final‑form, react‑hook‑form, and Formily, including code examples, performance considerations, and practical usage tips.
React Server Components propose a solution to React's data-fetching performance issues by separating components into server-side and client-side types, but face challenges like increased server costs and developer complexity.
The Xianyu Community Circle front‑end was modularized into independent Circle Info, Feed, and Overlay sections, using Rax’s useReducer + useContext for shared state, while minimizing non‑shared data, extracting providers, stabilizing props, caching pages, prefetching resources, and moving overlays out of global context to cut latency, reduce re‑renders, and boost performance on low‑end devices.
The article compares traditional React state‑management solutions—Redux’s single‑store with extra libraries and potential re‑renders, and MobX’s fine‑grained but class‑based approach—against the lightweight, hook‑driven Clean‑State library, which avoids providers, reduces bundle size, and offers precise module‑level updates for large and consumer applications.
This guide explains how to use the React‑based ljbisheng framework to create a markdown‑driven documentation site, covering installation, script configuration, bisheng.config.js settings, theme structure, plugin mechanisms, webpack integration, and the two‑step process of parsing markdown data and rendering React components.
This article explains how to optimize Docker images for a React application by switching to Alpine base images, applying multi‑stage builds, and using Nginx to serve static files, reducing the final image size from 1.16 GB to just 22 MB.
This article chronicles the evolution of the Taro framework from its inception as a React‑based mini‑program solution to a fully open, plugin‑driven multi‑platform architecture, highlighting technical challenges, Babel‑driven JSX compilation, component model redesign, and community‑driven growth.
This article explains the concept of priority queues, compares various implementations including binary heaps, demonstrates insertion and deletion operations with detailed code examples from React's SchedulerMinHeap, and discusses extensions to d‑ary heaps for performance‑critical scenarios.
It presents a curated selection of over twenty technical articles covering CSS performance, React Server Components, visualization algorithms, frontend monitoring, serverless migration, and more, each with brief insights and links for deeper reading.
The Tencent IMWeb team’s 2020 analysis highlights seven key frontend trends—explosive TypeScript adoption, React’s dominance among major frameworks, the rise of WebAssembly, accelerating low‑code platforms, serverless full‑stack development, DevOps maturation, and booming WebRTC—while forecasting continued growth in these areas for 2021.
This article explains how React 16's Fiber architecture replaces the recursive VDOM traversal with a cooperative, time‑sliced update model that splits work, uses linked‑list structures, assigns priorities, and allows tasks to be paused, resumed, or aborted for smoother rendering and better user experience.
This article explains React server-side rendering (SSR), covering the differences between client-side rendering (CSR) and SSR, their advantages and disadvantages, and provides a step-by-step guide to implementing a simple SSR demo with React.
This article explains how state management in the React ecosystem has progressed from simple parent‑child props communication to using Redux, then Redux‑Saga, and finally the DVA framework, highlighting the benefits and practical code examples for each stage, especially in commercial real‑estate projects.
React’s synthetic event system wraps native browser events into reusable SyntheticEvent objects, uses a delegated single listener per event type, maps event names through registration modules and plugins, pools event instances, and simulates capture and bubble phases across the fiber tree, with key changes in React 17.
The article explains how React’s virtual‑DOM diff can become a performance bottleneck, reviews classic optimizations such as debouncing, PureComponent, and idle callbacks, then details how the Fiber architecture makes diffing interruptible and prioritized and how the same reconciler can be leveraged to build custom cross‑platform renderers.
This article explains React 16’s new Fiber architecture and its cooperative scheduling algorithm, showing how large diff tasks are split into small asynchronous units using priority queues and min‑heap structures, with code examples, performance visuals, and insights into real‑time and delayed task handling.
This article provides a comprehensive overview of frontend routing in single-page applications, covering its historical evolution, core concepts of hash and history modes, implementation details in Vue and React, code examples, navigation guards, nested routes, and practical considerations for choosing routing strategies.
This article explains why mixing React Hooks with existing Class Components is often necessary, compares three integration techniques—Render Props, Higher‑Order Components, and Ref forwarding with useImperativeHandle—provides complete code examples for each, and discusses current Hook limitations and future support.
This article introduces AntV X6, a versatile JavaScript graph‑editing engine, covering its core capabilities such as node and edge creation, custom HTML/React nodes, rich connection styles, grid and background options, interactive tools like ports, grouping, selection, undo/redo, and provides links to tutorials, demos, and extensibility mechanisms.
The article explores how AI and machine learning are reshaping front‑end development, covering React 17's new JSX transform, Alibaba's AI‑driven front‑end initiatives, graphics programming showcases, AI knowledge‑graph resources, ML‑based static code analysis, and AntV's visualization tools.
This article introduces the background, technical stack, core features, step‑by‑step deployment instructions, and future plans of a .NET Core and React based unified authentication and authorization system designed to replace disparate login mechanisms across multiple company applications.
This article provides a detailed comparison of the three major frontend frameworks—React, Angular, and Vue—covering their design principles, strengths, weaknesses, performance benchmarks, popularity, learning curves, and suitability for different project requirements.
This article explains how React can serve as a complete state‑management solution by using hooks, lifting state, component composition, the Context API, and optional libraries, while also covering performance tips, server‑cached versus UI state, and when to adopt external tools.
This article provides CTOs and project managers with a comprehensive comparison of React and Vue, covering factors such as code quality, type checking, modularity, learning curve, developer friendliness, testing, server‑side rendering, performance, scalability, application size, and practical use‑case recommendations.
The article describes how a financial front‑end team identified manual project‑copying pain points, designed two automation tools—a project‑creation scaffolding and a generic packaging script—and details their architecture, implementation, and the resulting improvements in development efficiency and consistency across more than 260 projects.
Large‑scale front‑end projects suffer from oversized bundles, unnecessary listeners, deep cloning, and mutable state, causing latency and crashes; the article explains how to diagnose these problems with Chrome DevTools and Webpack tools and resolves them through bundle splitting, tree‑shaking, memoisation, immutable patterns, and caching.
This article analyzes the challenges of front‑end event tracking, compares existing manual, visual, and full‑tracking solutions, and presents a declarative component architecture with a buffered queue that decouples tracking logic from business code while handling click and exposure events efficiently in React.
