Frontend Design and Performance Optimization of Xianyu Community Circle

The article introduces the Xianyu Community Circle, a complex front‑end product that features multiple user roles, nested scrolling, infinite feeds, special character handling, direct page opening, and video playback.

To lower development cost, the team splits the page into independent business modules—Circle Info, Feed, and Overlay—so each module can be developed and maintained separately.

Shared state across modules is aggregated and managed with Rax's useReducer + useContext . The context hook is wrapped as a custom hook for easy use. A simple demo shows how to obtain the context instance.

Non‑shared data is kept in the smallest possible container. For example, a post list receives its initial data via props, while interaction state stays within the post element component, and the list container only handles video playback control.

During integration, performance bottlenecks were found: tab switching caused noticeable lag, overlay components re‑rendered unnecessarily due to Context.Provider updates, and network instability led to poor first‑screen experience. The team mitigated these issues by extracting Context.Provider into a dedicated higher‑order component, keeping props.children stable, and avoiding repeated createElement(xxx) calls.

The overlay container was moved out of the global context and placed alongside the main page component. Communication now occurs via method calls, reducing coupling and re‑renders, which improves performance on low‑end devices.

First‑screen latency was further reduced by caching page data between routes, adding a fallback mechanism for network errors, and introducing data prefetch and offline‑package caching. Resource loading and API requests are parallelized to shorten the critical path.

Post‑optimization metrics show a significant drop in interaction delay and smoother UI transitions, as illustrated by before/after comparisons.

Future work includes device‑type‑based feature degradation, customizable decorations, and making business components more generic and reusable.