TV Spatial Navigation
May 1, 2023Sergio Avalos, Senior Engineer
Summary
This post details the development of Spotify's TV Spatial Navigation system. The first iteration involved creating NavNode and NavContainer React components to represent navigable elements and handle specific navigation behaviors like cyclic and blocked navigation. Limitations included manual navigation logic and convoluted DOM structures. The second iteration introduced a React Hook-based approach (`useFocusRef`) to simplify API usage, reduce DOM elements, and decouple business logic, improving developer experience and testability.