I’m using the latest version of next.js (14.2.7) as of today. This is the minimal example that reproduces the error. What’s wrong with it and how can the error be avoided?

The sample loads data from two server actions. The successful server action result is provided by a react context; The failed server action calls notFound(). The not found page has a button then navigates the user to the home page. Once the user clicks on the button, the error will occur. It doesn’t really matter what the href is in the Link.

The main page consists of a provider, which contains a react suspense component. The suspense contains an async component, which calls the failing server action.

page.tsx

import React from "react";
import { willFail } from "./actions";
import { DataProvider } from "./provider";

export default async function Page() {
  return (
    <DataProvider>
      <React.Suspense>
        <FailData />
      </React.Suspense>
    </DataProvider>
  );
}

async function FailData() {
  return <div>{await willFail()}</div>;
}

The DataProvider component fetches the data in a react effect in which a server action is called.

provider.tsx

"use client";

import React from "react";
import { willSucceed } from "./actions";

export const dataContext = React.createContext(null);

export function DataProvider({ children }: { children: React.ReactNode }) {
  const [data] = React.useState(null);
  React.useEffect(() => {
    // setData
    await willSucceed();
  }, []);
  return <dataContext.Provider value={data}>{children}</dataContext.Provider>;
}

actions.ts

"use server";

import { notFound } from "next/navigation";

export async function willSucceed() {
  return null;
}

export async function willFail(): Promise<string> /* suppress type error */ {
  notFound();
}

not-found.tsx

import Link from "next/link";

export default function NotFound() {
  return (
    <div className="flex flex-col gap-8">
      <p>404 | Not found</p>
      <Link href="/" passHref>
        Retry
      </Link>
    </div>
  );
}

Here is the errors I got:

Error: Rendered more hooks than during the previous render.
    updateWorkInProgressHook react-dom.development.js:11435
    updateMemo react-dom.development.js:12613
    useMemo react-dom.development.js:13563
    useMemo react.development.js:2536
    Router app-router.tsx:334
    renderWithHooks react-dom.development.js:11121
    updateFunctionComponent react-dom.development.js:16290
    beginWork$1 react-dom.development.js:18472
    callCallback react-dom.development.js:20565
    invokeGuardedCallbackImpl react-dom.development.js:20614
    invokeGuardedCallback react-dom.development.js:20689
    beginWork react-dom.development.js:26949
    performUnitOfWork react-dom.development.js:25748
    workLoopSync react-dom.development.js:25464
    renderRootSync react-dom.development.js:25419
    recoverFromConcurrentError react-dom.development.js:24597
    performConcurrentWorkOnRoot react-dom.development.js:24542
    workLoop scheduler.development.js:256
    flushWork scheduler.development.js:225
    performWorkUntilDeadline scheduler.development.js:534
    EventHandlerNonNull* scheduler.development.js:569
    <anonymous> scheduler.development.js:630
    NextJS 4
    <anonymous> index.js:6
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:38595
    NextJS 4
    <anonymous> index.js:37
    NextJS 4
    <anonymous> client.js:3
    NextJS 4
    <anonymous> app-index.js:15
    NextJS 4
    <anonymous> app-next-dev.ts:7
    appBootstrap app-bootstrap.ts:61
    loadScriptsInSequence app-bootstrap.ts:20
    appBootstrap app-bootstrap.ts:60
    <anonymous> app-next-dev.ts:6
    NextJS 7
lockdown-install.js:1:97687

Warning: Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside `Router`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:134
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:67
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:24 app-index.tsx:25:19