You can customize your hook, to fetch a list of organizations, like this:
export function useOrganisation({ organisationIds }) { const [organisations, setOrganisations] = useState([]); // Load organisations useEffect(() => { loadOrganisations({ organisationIds, setOrganisations }) }, [organisationIds]) return { organisations, setOrganisations } } async function loadOrganisations({ organisationIds, setOrganisations }) { const orgs = []; for(let i=0; i < organisationIds.length; i++) { const data = await fetchOrganisationData(organisationIds[i]); orgs.push(data); } setOrganisations(orgs); } This can be used, in a component to get a single org, or in a dashboard to show multiple organisationsorganizations, without having to use the hook in a loop.
Or, as using hooks in a loop is not recommended, you can write a useEffect within your dashboard component to fetch a list of organizations and reuse some of your code. Like this:
export function useOrganisation({ organisationId }) { const [organisation, setOrganisation] = useState() // Load organisation useEffect(() => { const org = loadOrganisation({ organisationId }); setOrganisation(org); }, [organisationId]) return { organisation, setOrganisation } } export async function loadOrganisation({ organisationId }) { const data = await fetchOrganisationData(organisationId) return data; } export default function OrganisationsDashboard() { const [organisations, setOrganisations] = useState([]); useEffect(() => { const organisationIds = ['org1', 'org2', 'org3']; fetchOrganisations(organisationIds); }, []); async fetchOrganisations(orgIds) { const orgs = []; for(let i=0; i < orgIds.length; i++) { let org = await loadOrganisation({organisationId: orgIds[i]}); orgs.push(org); } setOrganisations(orgs); } }