TalkFE Shares Transition from Redux-Saga to React Query for MySubscription Service

The TalkFE team shared their experience of removing Redux and Redux-Saga and transitioning state management to React Query (v3.34.0) for 'MySubscription', a subscription service based on recurring payments. The existing structure suffered from increasing complexity in action types and Saga files as APIs grew, along with blurred boundaries between server data and client data.

Transition Background and Structural Improvements

Given the characteristics of having minimal global client state and high dependency on server data, React Query's caching and fetching capabilities were deemed more suitable. During the transition, Query Key naming was standardized to follow the order of 'domain group, query function name, and values affecting the API response'. Common logic was separated into 'Base Queries' and page-specific options into 'Custom Queries' to reduce component complexity.

Key Considerations and Usage

When using React Query, the useQueries hook does not support custom option settings. It is essential to understand the behavioral difference between isLoading (true only when no cached data exists) and isFetching (true during fetching regardless of cache presence). Additionally, since the mutate function in useMutation does not return a Promise, mutateAsync must be used for asynchronous processing. In cases where checking the loading state of parallel queries is difficult, a custom hook was implemented to reference queryCache and check the completion of fetching for all queries, thereby simplifying rendering conditions.

Evaluation and Outlook

The complex side-effect management of Redux-Saga was simplified, and caching became easier, resulting in reduced development resources. However, there were some shortcomings, such as the lack of options to control duplicate Mutation calls. The team expressed hope that features would improve through continuous updates to React Query.