suspense | Next.js | Page 1

violet phoenixBOT Oct 26, 2023, 8:26 AM

Hi @twilit lance. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

From the code you've provided, it seems like you're trying to use React's Suspense for data fetching. However, Suspense for data fetching is currently an experimental feature and it's not yet available in stable React releases.

In the current stable release, Suspense only supports lazy loading of components with React.lazy(). It does not yet support data fetching.

In your code, you're fetching data with an async function inside a useEffect hook and trying to use Suspense to show a fallback UI while the data is loading. This is a common pattern, but it's not supported by Suspense in the current stable React release.

If you want to use Suspense for data fetching, you'll need to use the experimental React release and follow the experimental Suspense for Data Fetching pattern. This involves creating a resource that reads data synchronously and throws a promise if the data is not yet available.

However, please note that this is an experimental feature and it's not recommended for production use. It's also not yet officially documented, so you'll need to refer to community resources and examples to learn how to use it.

For now, you might want to consider other patterns for handling loading states in your components. For example, you could use a loading state variable that you set to true when you start fetching data and set to false when the data is ready. You can then use this variable to conditionally render a loading spinner or other fallback UI.

Here's an example of how you might do this:

function UserTable() {
  const [usersList, setUSerList] = useState<UserType[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    (async function () {
      setIsLoading(true);
      const { users } = await getUsers();
      setUSerList(users);
      setIsLoading(false);
    })();
  }, []);

const handleOnChange = async (e: ChangeEvent<HTMLInputElement>) => {
setIsLoading(true);
const { users } = await getUsers(e.target.value);
setUSerList(users);
setIsLoading(false);
};

return (
<>
<TableHeader
leftButtonUrl="/settings/create-user"
searchOnchange={handleOnChange}
/>
{isLoading ? (
<p>Loading..</p>
) : (
<Table thead={theadList}>
{usersList?.map((item: UserType, i: number) => (
<UserTableRow key={i} user={item} index={i} />
))}
</Table>
)}
</>
);
}

export default UserTable;


In this code, I've added an `isLoading` state variable that is set to `true` when data fetching starts and set to `false` when data fetching is complete. This variable is used to conditionally render the loading message or the table.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#suspense