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:

1
// In your App component
2
useEffect(() => {
3
  // Move your Redux dispatch calls here
4
  dispatch(yourAction());
5
}, [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:

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

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!

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:

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

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

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

13
    return {
14
      props: {
15
        products: res.products || [],
16
      },
17
    }
18
  }
19
});

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.

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

• https://bobbyhadz.com/blog/react-cannot-update-component-while-rendering-different-component
• https://dev.to/labibahmed10/to-locate-a-bad-setstate-call-while-rendering-i27
• https://stackoverflow.com/questions/70556785/warning-cannot-update-a-component-x-while-rendering-a-different-y-component-to
• https://stackoverflow.com/questions/62336340/cannot-update-a-component-while-rendering-a-different-component-warning

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.