🐛 Help me: Next Link reload Layout when click it (Pages Router)

[gioimtg2003]

Summary

version package "next": "13.4.4",

const items = [
    {
        "label": "Draft",
        "key": "newTabDzlHaaaabst"
    },
    {
        "label": "Pending",
        "key": "newTabOnlRaaaabst"
    },
    {
        "label": "Approved",
        "key": "newTabcGfuaaaabst"
    },
    {
        "label": "Reject",
        "key": "newTabnC5Uaaaabst"
    }
]
const TabLabel = (props: PropsWithChildren<TabLabeProps>) => {
    const { items, keyCurrentTab, children, icon } = props;

    const { prepareHrefToUpdateParams: getTabHref } = useHandleAction({});

    const currentTabIdx = items?.findIndex((item) => item?.key === keyCurrentTab);
    const href = useDeepCompareMemo(
        () =>
            getTabHref({
                id: keyCurrentTab,
                isDefaultTab: currentTabIdx === 0
            }),
        [currentTabIdx, keyCurrentTab]
    );

    return (
        <Link href={href} as={undefined} scroll={false} shallow>
            <Flex justify="space-between" align="center" gap={12}>
                {icon && icon}
                {children}
            </Flex>
        </Link>
    );
};

Summary:

• This bug only occurs when I build -> start, not when running dev locally.
• when i click on the Pending tab the layout is reloaded, even though the other 3 tabs don't have this behavior. i tried everything but it failed
• Especially it only reloads the layout, not the whole page like pressing F5
• Similarly, I have a List component that uses and some Components, not all of them, have this error.

Help me pls

Additional information

No response

Example

No response

[icyJoseph]

Is this using the getLayout pattern? https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts

I guess, the pending tab creates a different React tree? or is it just the same as the rest? If a tag changes <Tag/> at all in a subtree, React discards the entire thing and re-renders.