The problem I encountered was - 

I made a Client layout  (CustomLayout), a child component of next.js provided server layout and that CustomLayout should have never un-mounted but everytime my server layout re-executes, my custom CustomLayout would un-mount then then mount again.

- All my refs and states were lost and re initialized. 
- All useEffetcs cleand up. 
- My effect with only [] in dependency also runs. 
- My entire UI would reset, the sider and header would also reload.

In my case I created two buttons on CustomLayout header, one for save and other for refresh. The save and refresh would work on the current client component opened as children. Since all my components are form, I made a UI for fixed save and (on demand) refresh button on the header and based on the current child component these two would work.

The refresh button calls the revalidatepath() method, that means my server layout will  re-execute to sync the cache diff and client component just next to server layout was tearing down and re-created, in my case CustomLayout.

**Next.js does a router.refresh() whenever we call revalidate function**, that means -

- Invalidate server cache
- Re-run server components
- Recreate client component subtree


#### **But this can happpen from anything that causes our server component to re-execute**,  and then the following client component will un-mount to mount again. for e.g. - 
- Cache invalidation using revalidateTag, router.refresh()
- Route Segment Changes
- Dynamic component using cookies, headers, searchParams (not tested with this)

_**Please check my [this blog](https://www.ranuvijay.me/blogs/common-form-save-and-delete-button) on how to create a common save button for multiple component and forms.**_

The Code -


1 - The server Layout : 
```
import CustomLayout from "@/_lib/layout/customLayout";

export default function RootLayout({ children }: any) {
  return (
    <html lang="en">
      <body>
        <CustomLayout>{children}</CustomLayout>;
      </body>
    </html>
  );
}

```


2 - My CustomLayout : 
```
"use client";
import {
  useState,
  useRef,
  useEffect,
  useTransition,
  useCallback,
  useMemo,
} from "react";
import { RefContext, GlobalDataContext } from "@/_lib/context/myContext";

type PropTypes = {
  children: React.ReactNode;
};

type ConsoleMenuType = {
  saveText: string;
  saveDisabled: boolean;

  refreshText: string;
  refreshDisabled: boolean;
};

const initialConsoleMenu = {
  saveText: "",
  saveDisabled: false,

  refreshText: "",
  refreshDisabled: false,
};

const CustomLayout = ({ children }: PropTypes) => {
  console.log("rerender layout");

  let formRef = useRef<any>(null);
  let imperativeRef = useRef<any>(null);

  const [consoleMenu, setConsoleMenu] =
    useState<ConsoleMenuType>(initialConsoleMenu);

  const [pending, startTransition] = useTransition();

  const saveThis = useCallback(() => {
    // formRef.current.submit();
    formRef.current.requestSubmit();
  }, []);

  const refresh = useCallback(() => {
    imperativeRef.current.refresh();
  }, []);

  const refValues = useMemo(
    () => ({
      formRef,
      imperativeRef,
    }),
    []
  );

  const globalDataValue = useMemo(
    () => ({
      setConsoleMenu,
      initialConsoleMenu,
    }),
    []
  );

  useEffect(() => {
    console.log("un-mounted and then mounted again");
  }, []);

  return (
    <GlobalDataContext.Provider value={globalDataValue}>
      <div className="containr leftAndRight flex flex bg-[red] h-[100vh]">
        <div className="leftPart sider w-[15%] bg-[yellow]">sider</div>

        <div className="rightPart flex flex-col bg-[green] w-[100%] ">
          <div className="header flex h-[60px] bg-[#f0f0f0] mb-4 items-center gap-x-4">
            <button
              disabled={consoleMenu.refreshDisabled}
              onClick={() => {
                saveThis();
              }}
            >
              Save
            </button>

            <button
              disabled={consoleMenu.refreshDisabled}
              onClick={() => {
                refresh();
              }}
            >
              Refresh
            </button>
          </div>
          <RefContext.Provider value={refValues}>
            {children}
          </RefContext.Provider>
        </div>
      </div>
    </GlobalDataContext.Provider>
  );
};

export default CustomLayout;


```


3 -  MyContext : 
```
import { createContext, RefObject } from "react";

type ConsoleMenuType = {
  saveText: string;
  saveDisabled: boolean;

  refreshText: string;
  refreshDisabled: boolean;
};

const initialConsoleMenu = {
  saveText: "",
  saveDisabled: false,

  refreshText: "",
  refreshDisabled: false,
};

type RefContextType = {
  formRef: RefObject<any>;
  imperativeRef: RefObject<any>;
};

export const RefContext = createContext<RefContextType | null>(null);

export const GlobalDataContext = createContext<{
  setConsoleMenu: React.Dispatch<React.SetStateAction<ConsoleMenuType>>;
  initialConsoleMenu: ConsoleMenuType;
}>({
  initialConsoleMenu: initialConsoleMenu,
  setConsoleMenu: () => {},
});


```


4 -   MyAction : 
```
"use server";
import { revalidatePath } from "next/cache";

export async function revalidateMyThisComponent() {
  // on demand revalidation of this path
  revalidatePath("/order");
}

```


5 - My Page in Order folder, route = "/order":
```
"use client";
import {
  useEffect,
  useContext,
  useTransition,
  useCallback,
  useImperativeHandle,
} from "react";

import { RefContext, GlobalDataContext } from "@/_lib/context/myContext";
import { revalidateMyThisComponent } from "@/_lib/actions/myActions";

export default function Home() {
  const { formRef, imperativeRef } = useContext<any>(RefContext);
  const { setConsoleMenu, initialConsoleMenu } = useContext(GlobalDataContext);
  const [pending, startTransition] = useTransition();

  const setHeaderMenu = useCallback(() => {
    setConsoleMenu((consoleMenu: {}) => ({
      ...consoleMenu,
      saveText: "Update Company Info",
      saveDisabled: false,

      refreshText: "Refresh",
      refreshDisabled: false,
    }));
  }, [setConsoleMenu]);

  useEffect(() => {
    setHeaderMenu();
  }, [setHeaderMenu]);

  useImperativeHandle(imperativeRef, () => ({
    refresh: async () => {
      setConsoleMenu(initialConsoleMenu);
      startTransition(async () => {
        await revalidateMyThisComponent();
        setHeaderMenu();
      });
    },
  }));

  const onFormSubmit = (e: any) => {
    e.preventDefault();
    console.log("first save");
  };

  return (
    <form ref={formRef} onSubmit={onFormSubmit}>
      <label>First Name</label>
      <input
        type="text"
        id="fname"
        name="fname"
        className="bordered border-2 border-[#000]"
      />
    </form>
  );
}
```

Now when ever i click on the refresh button on the header, my this code from CustomLayout runs again -


```
useEffect(() => {
console.log("un-mounted and then mounted again");
}, []);
```

This means our componene was unmounted and mounted again.

Why this happens or why our CustomLayout is not preserved -

To understand this we will have to understand the reconciliation engine of the react js and how react.js decides to keep a component persisted or to trash and mount it again.


```
// app/layout.tsx
export default function Layout({ children }) {
  return <CustomLayout>{children}</CustomLayout>;
}
```

Expected - 
- CustomLayout is the app shell
- State, refs, component should persist

what happend - 
- CustomLayout unmounts
-  CustomLayout mounts again
- state, refs reset, UI reset

This means CustomLayout is not the App shell, the root client boundary, if the server layout changed (re-executes) React thinks CustomLayout should have a new identity and so unmount and mount it again.

We can say the same thing with respect to RSC payload and diffing algorithm.

- The server component re-executes (due to cache invalidations)
- The RSC payload changes.
- Our CustomLayout is in direct contact with the server component and so everything is re-created due to new RSC payload.


### **The solution -**

We will have to create our own Client App shell which is in direct contact to server component. 

By creating a new client file, the wrapper for our CustomLayout, we can create a dedicated client boundary, a new App shell, which will act like a firewall to diffing algorithm. 

This new wrapper component will behave as a boundary, a permanent unchangable component,

In Next.js App Router, the app shell is not automatic. We can create it by placing a client wrapper component at the root layout boundary.


```
import CustomLayout from "./customLayout";
export default function NewAppShell({
  children,
}: {
  children: React.ReactNode;
}) {
  return <CustomLayout>{children}</CustomLayout>;
}

```

and then import this new client Shell in our server layout component component 

Our new Layout.tsx - 


```
  return (
    <html lang="en">
      <body>
        <NewAppShell>{children}</NewAppShell>;
        {/* <CustomLayout>{children}</CustomLayout>; */}
      </body>
    </html>
  );
```
And now we have a non unmounting client layout component.

### **Final Take away -**

```
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <Sidebar />   // client component
        {children}
      </body>
    </html>
  );
}

```
the above sidebar will always un mount and mount again whwnever server component re-executes. 


```
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ClientShell>
          {children}
        </ClientShell>
      </body>
    </html>
  );
}
```
in this above code the child will never unmount because of the ClientShell. 



Hope this helps.

Thanks

We will see how to prevent our next.js components from unmounting. The Hidden App Shell Rule in Next.js App Router and understand what is a Client Bounday, and see how to prevent the unmounting.

Solving the mystery of un-mounting components in Next.js

Contact Me

I want to hear from you