How to use rxjs-hooks - 3 common examples

function GesturesTwoDimentionsReorder({
  renderItem,
  ...props
}: React.ComponentProps) {
  const value = useObservable(() => interval(500).pipe(map(val => val * 3)))
  /**
   * State
   */
  const [markedRow, setMarkedRow] = useState()
  const [level, setLevel] = useState(0)
  const [ordering, setOrdering] = useState([1, 2, 3, 4, 5])
  const [markerPosition, setMarkerPosition] = useState(0)

  // FIXME position of animated rectangle
  // TODO get rectangle size from focused entry
  const refs = useRef(
    (() => ({
      translateX: new Animated.Value(0),
      translateY: new Animated.Value(0),
      lastOffset: { x: 0, y: 0 },
      lastTouchedItemIndex: null,

export function TagList(props: TagProps) {
    const [loading, setLoading] = useState(false);

    const [eventCallback, tagList] = useEventCallback((event$: Observable>) => {
        return event$.pipe(
            startWith([]),
            switchMap(() => TagAPI.queryTagList()),
            tap(() => {
                setLoading(false);
            }),
            catchError(err => {
                console.error(err);
                return of([]);
            })
        );
    }, []);

    function tagDelete(e: React.MouseEvent, id: number) {
        confirm({
            title: '提示',

)

  const data = refs.current
  const getTargetRowIdx = (event: PanGestureHandlerGestureEvent['nativeEvent']) => {
    const currentPosition = event.absoluteY
    let targetIdx = 0
    const res = reduceWhile((acc) => acc {
      targetIdx += 1
      acc += data.rowHeights[val]
      return acc
    },0)(ordering)
    setMarkerPosition(res)
    data.targetItemIndex = targetIdx
  }

  const [itemLayoutCallback, [itemLayout]] = useEventCallback(
    event$ =>
      event$.pipe(
        map(([event, itemIndex]: [LayoutChangeEvent, OrgEntry]) => [
          event.nativeEvent.layout.height,
          itemIndex,
        ]),
        tap(([height, itemId]) => (refs.current.rowHeights[itemId] = height))
      ),
    []
  )

  const [panGestureListenerCallback, [event]] = useEventCallback(
    event$ =>
      event$.pipe(
        map((event: PanGestureHandlerGestureEvent) => [event.nativeEvent]),
        auditTime(100),