Hi there! So, I've something like the following code:

export default async function Page() {
  const data = await getData()
  return
    <section>
      <div className="hidden sm:block"><DataTable data={data} /></div>
      <div className="sm:hidden"><DataList data={data} /></div>
    </section>
}

But I'm wondering if the following isn't better:

'use client'
export default function ClientComponent({ data }) {
  const isDesktop = useMediaQuery('(min-width: 768px)')
  return isDesktop ? <DataTable data={data} /> : <DataList data={data} />
}

Is the client version better since it only passes data for one component? The RSC version passes data to 2 components, although one of them is hidden, correct?