Breaking the Re-render Chain: Our Migration from Context to Zustand As the Trendyol Affiliate Ads team, our core responsibility is to bridge the gap between sellers and influencers, providing a …

Trendyol Tech Blog offers a glimpse into the technology and engineering practices powering one of Turkey's leading e-commerce platforms. With a focus on scalability, performance, and innovation, Trendyol Tech shares insights into microservices architecture, data engineering, and machine learning. Developers can learn about building high-traffic e-commerce systems, optimizing delivery pipelines, and leveraging  technologies to drive business growth.

Trendyol Tech

The Trendyol Affiliate Ads team migrated from React Context API to Zustand after hitting performance ceilings caused by cascading re-renders and lack of granular subscriptions. Their complex Ads Editor was generating 8,000+ function calls per interaction, causing visible UI lag. They adopted a feature-based store architecture with 7 independent Zustand stores for the create flow, using Immer for nested state updates and named DevTools instances for debuggability. The incremental, feature-by-feature migration avoided production risk. Results included a ~20% average reduction in interaction latency (31% in the most complex scenario), 80%+ reduction in Cumulative Layout Shift, 28% fewer UpdateLayoutTree recalculations, and a 60% drop in developer onboarding time. Key lessons: granular selectors are the primary performance driver, scoped stores beat a single global store, and the real bottleneck was React doing unnecessary work rather than slow JavaScript execution.

Breaking the Re-render Chain: Our Migration from Context to Zustand

Challenges with Our Previous State Management

The New Architecture: Feature-Based Stores

<p>Zustand has always been my favorite client side state management library</p>
