0

I'm working on refactoring existing logic into suspense.

These days, I use suspense, but there are many times when I have questions.

const Duplicate = ({ children }) => {
  return <section>{children}</section>
};

const Component = () => {
  const { data } = useQuery('fetch/any', fetcher, { suspense: true });

  return (
    <div>
      <Button disabled={data.disabled} label="example" />
      <Duplicate>{data.name}</Duplicate>
    </div>
  );
};

const Loading = () => {
  return (
    <>
      <Button disabled label="example" />
      <Duplicate>Loading..</Duplicate>
    </>
  );
};

const Render = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Component />
    </Suspense>
  );
}

If I write like this, I have to write Button, Duplicate component twice.

Whenever I do this, is this really efficient logic? have a doubt.
In this case, I wonder if it is better not to use suspense, or if there is another way to bypass it.

Sh031224
  • 769
  • 1
  • 7
  • 20
  • My initial reaction is that the button should not be displayed in the Loading fallback, but that's a design thing. – OFRBG Nov 22 '22 at 04:45
  • @OFRBG I think so too. But when the design is inevitably like this, do you think it is efficient not to use suspense – Sh031224 Nov 22 '22 at 04:50

0 Answers0