Im new to Svelte and a bit confused about the rendering in Svelte. So I have this code:

<script>
 export let recipients: string[];
 let recipientsContainer: HTMLDivElement;
 const shouldRenderRecipient = (recipient) => {
  return !recipientsContainer?.textContent;
 }
</script>
<div>
 <div bind:this={recipientsContainer}>
  {#each recipients as recipient}
   {shouldRenderRecipient(recipient) ? recipient : ''}
  {/each}
 </div>
</div>

so what I expected would happen was that the view would be rendered and then the recipients would be looped and for each recipient itd check renderRecipient and depending on whether there was already a rendered recipient it would either throw true or false. But whats confused me is that the shouldRenderRecipient function is entered before we have a valid DOM reference for recipientsContainer.

I thought we would have access to recipientsContainer inside of shouldRenderRecipient function since shouldRenderRecipient function only gets called once the view is rendered?