How to prevent additional re-renders due to params on NextJS?

I’m setting up a generic loading strategy for NextJS apps using framer-motion.

function MyApp({ Component, pageProps, router }) {
    const [isFirstMount, setIsFirstMount] = useState(true);

    useEffect(() => {
        const handleRouteChange = () => {
        };"routeChangeStart", handleRouteChange);

        // If the component is unmounted, unsubscribe
        // from the event with the `off` method:
        return () => {
  "routeChangeStart", handleRouteChange);
    }, [router]);
    console.log("My App ran");
    return (
            <AnimatePresence exitBeforeEnter>
                <motion.div exit={{ opacity: 0 }}>
                    {isFirstMount && <InitialTransition />}

I ran into an issue with params. When using params during initial loading (such as clicking on the refresh button on browser), NextJS loads an additional time. I believe its due to NextJS’s router query object update. For example, // works - you will see the black loading screen, the black loading screens slides down, and the child objects start popping on
// vs // fails - you will see the black loading screen flash in and out of view before the rest of the app proceeds

I made a codesandbox sample. On the browser side, test by adding or removing ?test=test to the end of the url.

How can I prevent the additional re-render or get the loader to work the same way regardless of having a param or not?

13 thoughts on “How to prevent additional re-renders due to params on NextJS?”

  1. Thank you for every other excellent article. Where else could anybody get that kind of info in such an ideal method of writing? I have a presentation subsequent week, and I’m at the look for such information.


Leave a Comment