Beauty Kurly Improves Filter UX and Optimizes API Calls by Adopting React Query

The Beauty Kurly web frontend team switched its data state management approach from Redux to React Query, improving both user experience and technical efficiency at the same time. The existing system had a problem where it showed previous data when navigating between pages or reconnecting, failing to respond to real-time inventory changes.

Tech Stack Transition and Caching Strategy

Through the team's internal democratic decision-making process, they adopted React Query, a library specialized in asynchronous data management. Unlike the server cache time (5 minutes), they set the stale time shorter at 1 minute, striking a balance between preventing unnecessary API calls and maintaining up-to-date information. This enabled real-time synchronization of server state, such as out-of-stock status or price changes.

Filter Feature Improvements and Results

As a result of applying the filter, customers can now discover the products they want higher up in the list. According to data analysis, whereas purchases were previously decided at an average of the 32nd product before the filter was applied, this was reduced to an average of the 19th product after applying it, increasing browsing efficiency.

Additionally, the team saved filter state in the URL to prevent it from resetting on refresh, and independently proposed and developed a search keyword highlighting feature. These changes reduced numerous API calls and built an environment where fresh data can be quickly received from the server even when returning after visiting other screens.