Avoid This Sneaky State Bug in Dynamic Routes (React + Next.js)

Rahul Chaurasia — Sat, 24 May 2025 14:30:00 +0000

I faced an unexpected issue while working with static pages in a Next.js project. It was a simple carousel component that received images via props and managed its internal state.

But after navigating to another page, the carousel began to act strangely. The wrong image was selected. Sometimes, it broke entirely. At first glance, nothing had changed — yet clearly, something had.

This happens because frameworks hide a lot of the complex stuff behind the scenes. It’s not a bug — just one of those things that can trip you up if you don’t understand what’s happening.

Going down the rabbit hole.

When we switch to another dynamic page, the route stays the same, so Next.js doesn't remount the main component. Instead, it just changes the props.
Due to this, all the child components in the tree are preserved along with their states.

React tree on first load

<App>
  └── [slug].tsx (slug = "product-a")
        └── <Gallery images={["a1.jpg", "a2.jpg"]} />

The gallery is rendered with images for "product-a". The selectedImageIndex is initialized to 0.

User makes a route change

<App>
  └── [slug].tsx (slug = "product-b")
        └── <Gallery images={["b1.jpg", "b2.jpg"]} />

The Gallery component was not unmounted during navigation. If the user had previously selected image index 1 on product-a, that same index remains selected after navigating to product-b.

And the functionality breaks if product-b doesn't have any image to serve on index 1.

This behavior is influenced by both React and Next.js.

The Solution

Instead of Googling, I went straight to ChatGPT like most people do nowadays. There were a couple of straightforward ways to fix it. I implemented one and noted the other as a solid alternative.

Include a unique key whenever calling the gallery component instance.
Add a useEffect that resets the internal state whenever the props, specifically the images, change.

I haven't tried the second option, but I believe it would provide the necessary granular control for some components.

Provinding the key

<App>
  └── [slug].tsx (slug = "product-b")
        └── <Gallery key="product-b" images={["b1.jpg", "b2.jpg"]} />

The key would change with the product, causing the component to unmount and remount. Upon successful operation, all the states would be set to default.

This approach was able to solve my issue effectively.

To wrap things up

The issue reminds us that modern frameworks do a lot of heavy lifting behind the scenes, which is fantastic! However, it also highlights the importance for developers to understand what's happening under the hood.

By knowing how React and Next.js handle component lifecycles and state, we can avoid these pitfalls and write more predictable, robust applications.
If you’ve encountered similar challenges or have tips to share, I’d love to hear about them

How to learn something new while solving errors

Rahul Chaurasia — Wed, 19 Feb 2025 08:14:42 +0000

Hey, fellow techies,

I have been having the itch to write about something on the internet. But I did not know what to write about.

Only recently, I had some enlightenment. What if I wrote about a topic that I was learning? I could share my learning experience with others, the "barriers," the "Aha" moments, the "Why does this code work?" and much more.

Cut to the chase, I decided to learn unit testing in React applications.

And the journey begins...

At first, I did not know where to begin. So, I started wandering the internet and found some shiny terms such as End to End testing (E2E), Test Driven Development (TDD), Code Driven Development (CDD), etc. But most of them did not make much sense to me.

Still, it was a good place to get my toes wet. I found a few videos on YouTube explaining the shiny terms and their use cases. Through YouTube, I was able to learn how to set up test cases.

These two videos, by programming with mosh, helped me understand most of the stuff:

But, the million dollar question was, where do I use this? Well, we haven't tried this way of testing the applications at my place of work. So, I took the plunge.

The website is built using Next JS with pages router, Chakra UI, and React query. So, I set everything up like in the tutorials and wrote my first test case.

BAM!!

Errors start popping up one by one. I get a total of 4 different types of errors.

1. Error with absolute imports
Our project uses absolute imports, i.e., @/components/ui/button like other Next JS projects. It has been the standard approach with Next JS for a while now. The tsconfig.json file contains the "baseUrl" option that is set as the root directory of the project.

However, the testing library only uses its config file. So, it was going nuts within the first line of code. I started googling for solutions and found a few that did not work for me. But all is not lost, and a solution appears. You would need to install the "path" package from the NPM registry and use its resolve method in your config.

p.s. I have attached the code snippet below this error because you can solve both of them by updating the config file

2. React is not defined

When I try to render one of the components, there is a big error: React is not defined (It's funny because this is a React project). We were using a higher version of react >= 17. So there's no compulsion to import react.

But the testing library thinks this is unacceptable. So, I tried to find a solution to this. And it involves installing a plugin and updating the vitest config file.

import { resolve } from 'path'
import { defineConfig } from 'vitest/config'
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, './src') }],
  },
})

3. Next Router is not mounted

Another error that I encountered on the way was related to the next router not being mounted. Some quick research showed me that the next router cannot be used outside a Next JS application. The next documentation asked me to mock the router, and I thought it was funny.

This is the only solution I was able to find through chatGPT for the above error.

vi.mock('next/router', () => ({
  useRouter: () => ({
    push: vi.fn(),
    query: {},
    pathname: '/',
    asPath: '/',
    replace: vi.fn(),
  }),
}))

4. No QueryClient set, use QueryClientProvider to set one

This was one of the straightforward ones. To use react query, the entire code needs to be wrapped inside the queryClientProvider by react query. The component, when working as a system, is wrapped correctly and works fine.

But, as I said, the testing library renders a specific component, leading to the error. This error is somewhat similar to the error mentioned above. We tried using something out of context and, as a result, got an error.

   const queryClient = new QueryClient()

    // Wrap the component in QueryClientProvider
    const { container } = render(
      <QueryClientProvider client={queryClient}>
        <SignUpForm />
      </QueryClientProvider>
    )

I haven't had much luck with testing our application. Yet, I still wanted to share what I have learned so far about testing and solving errors while setting up test cases.

I hope this article is of some help to you.

DEV Community: Rahul Chaurasia