Share Query Across Components Using Hooks in React Query

Last updated on 9 Aug, 2021

We can share a Query across components using React hooks. Here is an example of a custom React hook that fetch data from Github API.

const useGitUsers = () => {
  return useQuery("gitUsers", () => {
    return fetch("").then(
      (res) => res.json()

The hook returns a query. The hook can now be reused in functional components.

function ShowCount() {
  const queryUsers = useGitUsers();

  // Show results count from

function GitUsers() {
  const queryUsers = useGitUsers();

  // Loop through to show users list

Here, since both components are using the same query, only one network call happens.

--- ○ ---
Joby Joseph
Web Architect