useEffect with asyn function not updating state (or not running again with state change) - Nextjs13

I'm trying to get used to async data fetching in react and there's something I'm misunderstanding.

I need to render out a list of recipes from my API, this is the route I fetch that gets me my recipes, it works fine. This is called when fetching
/api/recipes

import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export async function GET(req){
	const supabase = createRouteHandlerClient({ cookies });
  let recipes, error;
  try {
    ({data : recipes, error} = await supabase.from('Recipes').select('*'));
    if(error){
      throw error;
    }
    console.log(recipes)

  } catch (error) {
    console.log(error)
    alert(error.description || error.message);
  }
  return NextResponse.json({recipes})
}

Now in my react component, I cant seem to understand how to get my state to update or my useeffect doesnt seem to respond to the fetch calls resolving and setting a new state.

"use client"
import { useState, useEffect } from "react";

export default function() {

  const [recipes, setRecipes] = useState([])
  
  useEffect(() => {
    async function getRecipes() {
      const res = await fetch("/api/recipes");
      const ress = await res.json();
      setRecipes[ress.recipes];
    }
    getRecipes();

    console.log(recipes)
  }, [recipes])
  
  

  return (
    <div className="font-sans text-3xl">
      {recipes}
    </div>
  );
}

I understand that setting state is also async so I wont see the new state in the first console log however I should see it on a second time when the recipes state changes as its in my dependency array.

So either my useeffect isnt running right, or my state isnt even updating.

btw if I console.log(ress.recipes) it returns my recipes, the data/endpoint works fine

A few issues I'm seeing...

This syntax is wrong:

setRecipes[ress.recipes];

You invoke a function with parentheses, not brackets:

setRecipes(ress.recipes);

Don't include recipes in the dependency array:

}, [recipes])

Because every time recipes changes, the effect will re-run. And since the effect changes recipes, that's an infinite loop. Use an empty dependency array to execute the effect just once when the component first renders:

}, [])

Remove this:

console.log(recipes)

It won't show you anything meaningful, since (1) the asynchronous operation hasn't completed yet and (2) even if you await that operation, the state hasn't been updated yet.

Aside from that, your next step will simply be to decide how you want to actually display these records. Just showing the raw array won't be very useful:

{recipes}

You can iterate over the array and show some markup for each record. For example:

{recipes.map(r => (
  <div>Show information from "r" here.</div>
))}