Show guard inside or outside component?

session() {
  session() {
    const { sessionID } = this.state
    if (!sessionID) throw new Error('Session ID not set')

    const session = sessionStore.sessionMap.get(sessionID)
    if (!session) throw new Error('Session not found')

    return session
  }
}

        <Show when={props.chat.state.sessionID}>
          <ToggleStarred chat={props.chat} />
        </Show>

export const ToggleStarred: Component<ChatProps> = (props) => {
  const session = () => (props.chat.state.sessionID ? props.chat.session() : null)
  const isStarred = () => session()?.state.starred ?? false

  return (
    <Show when={session()}>
      {(s) => (
        <button
          onClick={() => s().setStarred(!isStarred())}
          aria-pressed={isStarred()}
          aria-label={isStarred() ? 'Remove Star' : 'Add Star'}
        >
          <StarIcon
            fill={isStarred() ? 'currentColor' : 'none'}
            classList={{
              'text-amber-400': isStarred(),
              'text-neutral-400': !isStarred(),
            }}
          />
        </button>
      )}
    </Show>
  )
}