useBlockNumber

useBlockNumber tracks the best block number of a chain, updated as new blocks arrive. All components watching the same chain share one block subscription, dropped when the last consumer unmounts. Values are pushed, so there is nothing to refetch.

Beyond showing chain liveness, the block number is a handy re-render tick: anything derived from it recomputes once per block.

Usage

import { useBlockNumber } from "@use-truapi/react";

function BlockIndicator() {
  const { data: blockNumber, isPending, error } = useBlockNumber();

  if (isPending) return <p>Connecting…</p>;
  if (error) return <p>Lost the chain: {error.message}</p>;

  return <p>Best block: #{blockNumber}</p>;
}

<script setup lang="ts">
import { useBlockNumber } from "@use-truapi/vue";

const { data: blockNumber, isPending, error } = useBlockNumber();
</script>

<template>
  <p v-if="isPending">Connecting…</p>
  <p v-else-if="error">Lost the chain: {{ error.message }}</p>
  <p v-else>Best block: #{{ blockNumber }}</p>
</template>

To watch a chain other than the default, pass its key:

const { data } = useBlockNumber({ chain: "people" });

Pass enabled: false to detach without unmounting, for views that are hidden but kept alive (in Vue, enabled may be a getter):

const { data } = useBlockNumber({ enabled: isVisible });

See also

• useChainSubscription is the general-purpose live subscription this is built on.
• useBalance watches the native balance of an address.

API reference

React

function useBlockNumber(options?): UseQueryResult<number, Error>;

Best-block number, live.

Parameters

Returns

UseQueryResult<number, Error>

Vue

function useBlockNumber(options?): QueryResult<number>;

Best-block number, live.

Parameters

Returns

QueryResult<number>