spatial-nav-hooks-distributed-logic.jsx

function GalleryRow({items, focused}) {
  const [focusedItemIndex, setFocusedItemIndex] = useState(0);
  
  const onKeyPress = useCallback(({keyCode}) => {
    if (!focused) {
      return;
    }
    
    let newIndex;
    
    if (keyCode === KEY_RIGHT) {
      newIndex = focusedItemIndex + 1;
    } else if (keyCode === KEY_LEFT) {
      newIndex = focusedItemIndex - 1;
    }
    
    setFocusedItemIndex(Math.clamp(newIndex, 0, items.length - 1));
  }, [focused]);
  
  useEffect(() => {
    window.addEventListener('keydown', onKeyPress);
    
    return () => {
      window.removeEventListener('keydown', onKeyPress);
    };
  }, [onKeyPress]);
  
  return (<div>
    {items.map((item, index)) => <GalleryItem
      key={item.id}
      focused={index === focusedItemIndex}
      {...item}
    />}
  </div>);
}