From f56177b47ed20daac1c6b4780c7a9455fdb24395 Mon Sep 17 00:00:00 2001
From: Timo Sand <timo.sand@f-secure.com>
Date: Wed, 27 May 2026 01:01:20 +0300
Subject: [PATCH] Replace mentions of `react-use` in docs with
 `@react-hookz/web`

Signed-off-by: Timo Sand <timo.sand@f-secure.com>
---
 .../plugins/frontend/004-http-client.md       |  6 ++---
 docs/plugins/call-existing-api.md             | 24 ++++++++++++-------
 .../using-backstage-proxy-within-plugin.md    | 14 +++++++----
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/docs/golden-path/plugins/frontend/004-http-client.md b/docs/golden-path/plugins/frontend/004-http-client.md
index cb7f3fd67a..1047003a79 100644
--- a/docs/golden-path/plugins/frontend/004-http-client.md
+++ b/docs/golden-path/plugins/frontend/004-http-client.md
@@ -28,7 +28,7 @@ function useTodos() {
 
     const data = await response.json();
     return data.items;
-  }, [fetch]);
+  });
 }
 ```
 
@@ -37,8 +37,8 @@ Here, we're using Backstage's `fetchApi` which wraps the browser `fetch` and aut
 1. Injects authentication credentials - you don't need to attach any `Authorization` headers manually.
 2. Resolves `plugin://<pluginId>` URL schemes to the real plugin URL for your instance.
 
-The `useAsync` hook from `react-use` runs the async function on mount and
-returns `{ value, loading, error }`, which the component uses to show a
+The `useAsync` hook from `@react-hookz/web` runs the async function on mount and
+returns `[{ status, result, error }, { execute }]`, which the component uses to show a
 loading spinner, example todo items if the backend request fails, or the
 fetched todo list.
 
diff --git a/docs/plugins/call-existing-api.md b/docs/plugins/call-existing-api.md
index 5b5a91b708..d21117531a 100644
--- a/docs/plugins/call-existing-api.md
+++ b/docs/plugins/call-existing-api.md
@@ -26,13 +26,15 @@ such as `axios`.
 Example:
 
 ```ts title="plugins/my-awesome-plugin/src/components/AwesomeUsersTable.tsx"
-import useAsync from 'react-use/esm/useAsync';
+import { useAsync, useMountEffect } from '@react-hookz/web';
 
 function AwesomeUsersTable() {
-  const { value, loading, error } = useAsync(async () => {
+  const [{ status, result, error }, { execute }] = useAsync(async () => {
     const response = await fetch('https://api.frobsco.com/v1/list');
     return response.json();
-  }, []);
+  });
+
+  useMountEffect(execute);
 
 
   ...
@@ -94,17 +96,19 @@ import {
   discoveryApiRef,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/esm/useAsync';
+import { useAsync, useMountEffect } from '@react-hookz/web';
 
 function FrobsAggregator() {
   const fetchApi = useApi(fetchApiRef);
   const discoveryApi = useApi(discoveryApiRef);
 
-  const { value, loading, error } = useAsync(async () => {
+  const [{ status, result, error }, { execute }] = useAsync(async () => {
     const baseUrl = await discoveryApi.getBaseUrl('proxy');
     const response = await fetchApi.fetch(`${baseUrl}/frobs`);
     return response.json();
-  }, [fetchApi, discoveryApi]);
+  });
+
+  useMountEffect(execute);
 
   // ...
 }
@@ -171,19 +175,21 @@ import {
   discoveryApiRef,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/esm/useAsync';
+import { useAsync, useMountEffect } from '@react-hookz/web';
 
 function FrobsAggregator() {
   const fetchApi = useApi(fetchApiRef);
   const discoveryApi = useApi(discoveryApiRef);
 
-  const { value, loading, error } = useAsync(async () => {
+  const [{ status, result, error }, { execute }] = useAsync(async () => {
     // highlight-next-line
     const baseUrl = await discoveryApi.getBaseUrl('frobs-aggregator');
     // highlight-next-line
     const response = await fetchApi.fetch(`${baseUrl}/summary`);
     return response.json();
-  }, [fetchApi, discoveryApi]);
+  });
+
+  useMountEffect(execute);
 
   // ...
 }
diff --git a/docs/tutorials/using-backstage-proxy-within-plugin.md b/docs/tutorials/using-backstage-proxy-within-plugin.md
index fef4b5b8e0..e7310e93bc 100644
--- a/docs/tutorials/using-backstage-proxy-within-plugin.md
+++ b/docs/tutorials/using-backstage-proxy-within-plugin.md
@@ -71,20 +71,22 @@ import {
   fetchApiRef,
 } from '@backstage/core-plugin-api';
 import { Progress, Alert } from '@backstage/core-components';
-import useAsync from 'react-use/esm/useAsync';
+import { useAsync, useMountEffect } from '@react-hookz/web';
 import { myAwesomeApiRef } from '../../api';
 
 export const AwesomeUsersTable = () => {
   const fetchApi = useApi(fetchApiRef);
   const discoveryApi = useApi(discoveryApiRef);
 
-  const { value, loading, error } = useAsync(async () => {
+  const [{ status, result, error }, { execute }] = useAsync(async () => {
     const baseUrl = await discoveryApi.getBaseUrl('proxy');
     // As configured previously for the backend proxy
     const resp = await fetchApi.fetch(`${baseUrl}/<your-proxy-uri>`);
     if (!resp.ok) throw new Error(resp.statusText);
     return resp.json();
-  }, [fetchApi, discoveryApi]);
+  });
+
+  useMountEffect(execute);
 
   // ...
 };
@@ -238,16 +240,18 @@ Now you should be able to access your API using the backstage hook
 ```ts title="plugins/my-awesome-plugin/src/components/AwesomeUsersTable.tsx"
 import { useApi } from '@backstage/core-plugin-api';
 import { myAwesomeApiRef } from '../../api';
-import useAsync from 'react-use/esm/useAsync';
+import { useAsync, useMountEffect } from '@react-hookz/web';
 
 export const AwesomeUsersTable = () => {
   const apiClient = useApi(myAwesomeApiRef);
 
-  const { value, loading, error } = useAsync(async () => {
+  const [{ status, result, error }, { execute }] = useAsync(async () => {
     const users = await apiClient.listUsers();
     return users;
   }, [apiClient]);
 
+  useMountEffect(execute);
+
   // ...
 };
 ```