Refactoring Qunar's Hotel Page with React Native: Challenges, Solutions, and Lessons Learned

The talk, presented at Qunar's 2016 Technical Carnival by iOS engineer Zhu Tianren, introduces the motivation for experimenting with React Native on the hotel page and hotel home page, outlining the business context and the decision to start with these two screens.

Initially the team applied a native‑thinking approach to React Native development, using Redux for data flow but keeping most logic in top‑level view functions and data properties, which led to three major problems: a native‑style development mindset that hindered proper React usage, poor robustness due to tangled logic and lack of pure reducers, and sub‑par animations on low‑end devices.

The presentation explains Redux's core workflow (store, dispatch, action, reducer, state) and shows how the top‑level view interacted with Redux, illustrating the overly complex view hierarchy and the difficulty of debugging and maintaining such code.

To address these issues, the team shifted to a frontend‑centric architecture: they moved business logic from the view into Redux actions (leveraging thunk middleware), extracted reusable UI components, and used the connect function to bind sub‑components directly to the store, allowing automatic UI updates when state changes.

Reducers were given proper initial state and responsibility for data validation, improving robustness. All data, even intermediate results, were stored in Redux state and organized by domain, reducing the size of the top‑level view and making the codebase more modular.

Database read/write operations were consolidated to page entry and exit points, with state acting as the single source of truth, eliminating race conditions between JavaScript and native threads and improving performance.

For animation issues, the team created a native animation API exposed to JavaScript via view tags, enabling high‑performance native animations that avoided frame drops on devices like the iPhone 5c.

Performance measurements showed a one‑third reduction in first‑load time and smoother subsequent loads after the refactor.

The article concludes with four key takeaways: adopt React Native thinking rather than native thinking, keep all data in Redux state, leverage native modules for performance‑critical features, and ensure reducers are robust to maintain state integrity.