// component
...
const [someState, setSomeState] = useState(/* some number */);

useEffect(() => {
  const runFetch = async () => {
    await action1()
  }
}, [someState]);

// action1
'use server';

export async function action1() {
 return await action2();
}

// action2
'use server'

export async function action2() {
  return await fetch(/* */);
}

"use server";

export async function action1() {
  // If you do this, it doesn't work because Response is not a valid
  // server action return value.
  // return fetch("https://generate-secret.vercel.app/32");

  // But you can do this just fine
  const res = await fetch("https://generate-secret.vercel.app/32");
  return res.text();
}

export async function action2() {
  return action1();
}

// component
/* ... */
useEffect(() => {
  async function GetData() { /* ... */ }
  GetData();
}, [someState]);

// component

/* ... */
async function GetData() { /* ... */ }
// Technically async callbacks are not allowed in useEffect 🤷‍♂️
// @ts-ignore
useEffect(GetData, [someState]);