Proper way to get observable array length

[darklight9811]

Reading the docs I couldn't find a clear answer, what is the most appropriate way of getting an array length?

I'm currently doing this:

function App () {
  const form = useObservable({ data: [] })

  const hasContent = useComputed(() => form.data.get().length !== 0)

  return (
    <Show if={hasContent} else={() => "Start typing"}>
      <For
        optimized
        each={form.data}
        item={Line}
      />
    </Show>
  )
}

[jmeistrich]

You can just do form.data.length - under the hood it's the same as form.data.get(/*shallow*/ true).length. Shallow makes it re-compute only if an element is added/removed to the array, and ignore modifications within individual elements, so that may be better for performance if elements change a lot.

But for Show you can just give if a function - you don't need to create a computed for it. And since else doesn't change based on any observables, you can just give it the string without a function.

So this should work:

function App () {
  const form = useObservable({ data: [] })

  return (
    <Show if={() => form.data.length > 0} else="Start typing">
      <For
        optimized
        each={form.data}
        item={Line}
      />
    </Show>
  )
}