Next.js 13 showing loading.tsx whenever useState() setter is called

Question

I have a client component with a simple text field which is used with useState() hook. Whenever I change the text and onChange is called, I see the loading UI defined in loading.tsx and then the updated UI. But the text field is not focused anymore.

What do I have to change, so that the UI is refreshed without showing the loading UI, so that the text field stays focused?

The folder structure looks like this:

- app
  - layout.tsx
  - products
    - page.tsx
    - loading.tsx
    - [id]
      - page.tsx (page mentioned above)

app/products/[id]/page.tsx

"use client";
import { useState } from "react";

export default async function ProductDetail({
  params,
}: {
  params: { id: string };
}) {
  const product = { id: "123", name: "Testprodukt" };

  const [name, setName] = useState(product.name);
  return (
    <div>
      <h1>Edit product</h1>
      <div>
        <p>Product name</p>
        <input
          type="text"
          placeholder="Product name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
    </div>
  );
}

app/products/loading.tsx

import LoadingIndicator from "@/components/LoadingIndicator";

export default function Loading() {
  return (
    <div>
      <LoadingIndicator />
    </div>
  );
}

app/layout.tsx

import Navbar from "@/components/Navbar";
import "./globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <div>
          <Navbar />
          <div>{children}</div>
        </div>
      </body>
    </html>
  );
}

Need more code to understand. What do you have on higher level? loading.tsx, product, etc.. — Ahmet Firat Keler, Jun 23 '23 at 17:10
Thanks for the feedback. I have added my folder structure and the code of the other elements. — LarsDev, Jun 23 '23 at 17:18
If you would like to rerender only certain components within your html, look into the useMemo hook. It will allow you to choose what components are rerendered instead of rerendering the whole page as useState does. — Landon Harter, Jun 23 '23 at 17:24

score 0 · Accepted Answer · answered Jun 23 '23 at 23:02

0

I found the solution. The function component was declared as async. When removing the async, it works as expected.

answered Jun 23 '23 at 23:02

LarsDev

37
6

Next.js 13 showing loading.tsx whenever useState() setter is called

1 Answers1