diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json
index b96570a3bb..079b1d2d71 100644
--- a/plugins/gcp-projects/package.json
+++ b/plugins/gcp-projects/package.json
@@ -38,7 +38,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "react-router-dom": "6.0.0-beta.0",
-    "react-hookz": "^1.0.12"
+    "@react-hookz/web": "^12.3.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"
diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
index 00a4355675..b900b81695 100644
--- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
@@ -27,7 +27,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import React from 'react';
-import { useAsync } from 'react-hookz';
+import { useAsync, useMountEffect } from '@react-hookz/web';
 import { gcpApiRef } from '../../api';
 
 import {
@@ -60,18 +60,12 @@ const DetailsPage = () => {
   const api = useApi(gcpApiRef);
   const classes = useStyles();
 
-  const {
-    status,
-    result: details,
-    error,
-  } = useAsync(
-    async () =>
-      api.getProject(
-        decodeURIComponent(location.search.split('projectId=')[1]),
-      ),
-    [location.search],
+  const [{ status, result: details, error }, { execute }] = useAsync(async () =>
+    api.getProject(decodeURIComponent(location.search.split('projectId=')[1])),
   );
 
+  useMountEffect(execute);
+
   if (status === 'loading') {
     return <LinearProgress />;
   } else if (error) {
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
index 67902db4fe..dea12f4b60 100644
--- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
@@ -18,7 +18,7 @@
 import { Button, LinearProgress, Tooltip, Typography } from '@material-ui/core';
 import React from 'react';
 
-import { useAsync } from 'react-hookz';
+import { useAsync, useMountEffect } from '@react-hookz/web';
 import { gcpApiRef, Project } from '../../api';
 
 import {
@@ -58,7 +58,10 @@ const labels = (
 const PageContents = () => {
   const api = useApi(gcpApiRef);
 
-  const { status, result, error } = useAsync(() => api.listProjects());
+  const [{ status, result, error }, { execute }] = useAsync(() =>
+    api.listProjects(),
+  );
+  useMountEffect(execute);
 
   if (status === 'loading') {
     return <LinearProgress />;
diff --git a/yarn.lock b/yarn.lock
index 90a6ef9c24..d1973a686c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4362,6 +4362,18 @@
   resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
+"@react-hookz/deep-equal@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@react-hookz/deep-equal/-/deep-equal-1.0.1.tgz#1e9aad97b964879b54a3909f36f0727befa13e1f"
+  integrity sha512-6k/pU2jNlgYvKOy84vpCAZ8MGVwybvAdjzrh4UicCVOCPxz0LSBws1OE6O5TO4sPHaSw+yLfNzNK8RicGFc1Kw==
+
+"@react-hookz/web@^12.3.0":
+  version "12.3.0"
+  resolved "https://registry.npmjs.org/@react-hookz/web/-/web-12.3.0.tgz#a9a1311a15171a57d68a3db61492f913d4fd455a"
+  integrity sha512-Uujp2RfX/oDEtAbdkV0W/nhiQ5ZYVH+MEq04T7/8TstyiwoIlvsRbEic6c6gQA6sQ/lw93cZ8NP8R7AYjiqDvg==
+  dependencies:
+    "@react-hookz/deep-equal" "^1.0.1"
+
 "@rjsf/core@^3.2.1":
   version "3.2.1"
   resolved "https://registry.npmjs.org/@rjsf/core/-/core-3.2.1.tgz#8a7b24c9a6f01f0ecb093fdfc777172c12b1b009"