I want to know if there's a better or cleaner way of fetching and passing the data across my app?

So far I have:
app/client with a page that has a <AddClientModal> and a <ClientList >

Server component fetchClients.ts that fetches clients from supabase

/components with:
- ClientList.tsx which calls the above fetchClient component and renders the data in the page
- AddClientModal.tsx a button which opens up a form modal and does a post call to supabase to push the data.

My question is if its better to retrieve the clients data with a useState and set it within a useEffect or simply declaring a const variable without a useEffect?

Also, should I fetch the clients data in the app/clients.tsx page and then pass it to my components as props, or is it okay calling it within my ClientList.tsx component where it is rendered?