“Cannot Update a Component” Error in Next.js

Help
,
1

searchSuggestion
searchSuggestion1920×1020 306 KB

error
error1920×1020 129 KB

This was a PC project where I clicked a search suggestion in the head, getting an error as above with the page’s navigation.

“Cannot update a component (NavBar) while rendering a different component (App). To locate the bad setState() call inside App, follow the stack trace as described in https://react.dev/link/setstate-in-render“

The search suggestion data are stored in redux imported in the component, App. NavBar gets them from redux as below:

App
App1920×1020 146 KB

NavBar
NavBar1920×1020 151 KB

The relevant dependencies are:

{
  "next": "15.3.4",
  "react": "^19.0.0",
  "@reduxjs/toolkit": "^2.8.2",
  "next-redux-wrapper": "^8.1.0",
  "react-redux": "^9.2.0"
}

How can I solve it? Thanks in advance!

4

Looking at your setup, the issue is probably that when App renders and dispatches Redux actions, it’s causing NavBar to re-render and potentially trigger more state updates.

A few ideas to solve it:

Move state updates to useEffect

Instead of dispatching actions during render, wrap them in useEffect:

// In your App component
useEffect(() => {
  // Move your Redux dispatch calls here
  dispatch(yourAction());
}, [dispatch]);

Check for unnecessary re-renders

Make sure your NavBar component isn’t dispatching actions during render. Any dispatch() calls should be in event handlers or useEffect hooks, not in the component body.

Use React.memo for NavBar

Prevent unnecessary re-renders of NavBar:

const NavBar = React.memo(() => {
  // Your NavBar component code
});

Consider upgrading next-redux-wrapper

Since you’re using Next.js 15 with React 19, next-redux-wrapper v8.1.0 might have compatibility issues. Consider migrating to the newer Redux patterns for Next.js or check if there’s a newer version available.

The key is to ensure state updates only happen in response to user interactions or in useEffect hooks, never during the render phase.

I hope that helps!

1 Like
5

I’m sorry for the late reply at first since I can only check the problem out at weekend. Thank you for your ideas!

I dispatched an action in the getServerSideProps function in the Search page but couldn’t put it in useEffect, causing an error. TypeError: Cannot read properties of null (reading ‘useEffect’). The relevant code was:

export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps(function(store){
  return async (context) => {
    await store.dispatch(fetchSearchSuggest());

    /* useEffect(async () => {
      await store.dispatch(fetchSearchSuggest());
    }, [store.dispatch]); */

    //在服务器端获取 url 中的查询参数
    const {q} = context.query;
    const res = await getSearchPageInfo(q as string);

    return {
      props: {
        products: res.products || [],
      },
    }
  }
});

I didn’t dispatch actions in NavBar component.

I have already used memo for NavBar component.

V8.1.0 is currently the newest version for next-redux-wrapper in npm.

6

This is a fairly common issue. Others have written more extensively about it. Please try these resources:

7

Thank you for providing many resources to me so that I realise how to fix the problem. I should move dispatch from getServerSideProps to Search component wrapped in a useEffect hook.

1 Like