NextJS 13 WARNING: Easy Mistake = Infinite Loops
Why Stack Overflow recommends it
Stack Overflow users link it when answering Next.js 13 questions about fetching data in client components and avoiding repeated re-renders with `use`.
Recommended by 1 people across 1 different months, 2023 to 2023.
What it is
A 24-minute coding walkthrough by Jack Herrington on using the new React `use` hook in Next.js 13 client components. He builds a small Pokemon query client and shows how calling `use` conditionally or with unstable promises can cause infinite render loops.
What people said
Recommends Saumus · 2023-06 · Stack Overflow · on “Why I keep getting undefined? I'm using Stipe with Next.JS”
for your 'use client' statement I can guess that you are using Next 13. Next 13 replace some methods and getStaticProps is one of them. You can use fetch function to get the data. check this migration guide [LINK] But you will have another problem since your component is a client component and next is still working in that part. Wrapping fetch in use is currently not recommended in Client Components and may trigger multiple re-renders. For now, if you need to fetch data in a Client Component, we recommend using a third-party library such as SWR or React Query. Please check this part use in client components [LINK] . To solve this problem I did a function to avoid re-renders const fetchMap =
Cites michaelNL · 2023-08 · Stack Overflow · on “Is this a good way to handle client components in Server Side pages to take advantage of SSR?”
thanks for the input - I was worried maybe it was a bad convention because I thought I was wrapping a client component in a client wrapper. Not a server component in a client component? if that makes sense. I also watched this [this video] and thought making use of the "Use' hook was recommended usage. However that would be complicated to do given the different data inputs needed.
Cites shawn · 2023-12 · Stack Overflow · on “Next.js 'use client' with server component(glob)”
Although, I found a answer(? may be bypass) from youtube, [this video] I answer my question for someone who might have a similar issue. The new code get the images using Route Handlers . app/page.tsx import Image from "next/image"; import Gallery from "./ui/Gallery"; import SearchBar from "./ui/SearchBar"; import GalleryWrapper from "./ui/GalleryWrapper"; import { useState } from "react"; export default function Home() { const [isSearching, setIsSearching] = useState(false); return ( <div className="max-w-5xl m-auto mt-10"> <SearchBar setIsSearching={setIsSearching} /> <Gallery isSearching={isSearching} /> </div> ); } ui/Gallery.tsx import React, { use } from "react"; import Image from "next/imag