diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json
index 992336300f..b96570a3bb 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-use": "^17.2.4"
+ "react-hookz": "^1.0.12"
},
"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 36247ac492..00a4355675 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-use/lib/useAsync';
+import { useAsync } from 'react-hookz';
import { gcpApiRef } from '../../api';
import {
@@ -61,9 +61,9 @@ const DetailsPage = () => {
const classes = useStyles();
const {
- loading,
+ status,
+ result: details,
error,
- value: details,
} = useAsync(
async () =>
api.getProject(
@@ -72,7 +72,7 @@ const DetailsPage = () => {
[location.search],
);
- if (loading) {
+ if (status === 'loading') {
return ;
} else if (error) {
return (
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
index d5a57432b3..f78010db90 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-use/lib/useAsync';
+import { useAsync } from 'reach-hookz';
import { gcpApiRef, Project } from '../../api';
import {
@@ -58,9 +58,9 @@ const labels = (
const PageContents = () => {
const api = useApi(gcpApiRef);
- const { loading, error, value } = useAsync(() => api.listProjects());
+ const { status, result, error } = useAsync(() => api.listProjects());
- if (loading) {
+ if (status === 'loading') {
return ;
} else if (error) {
return (
@@ -108,7 +108,7 @@ const PageContents = () => {
},
]}
data={
- value?.map((project: Project) => ({
+ result?.map((project: Project) => ({
id: project.projectId,
name: project.name,
projectNumber: project?.projectNumber || 'Error',