react обновление useContext не обновляет memo компонент

Question

я пишу приложение на laravel, jetStream, react, ts, inertiaJS. Большой стек, но это не важно. Для переноса роутов из ларавель я использую ziggy.js. В jetStream для удобной работы из коробки написан хук useRoute. Вот код:

// useRoute.tsx
import route from 'ziggy-js';
import { createContext, useContext } from 'react';

export const RouteContext = createContext<typeof route | null>(null);

export default function useRoute(): typeof route {
  const fn = useContext(RouteContext);
  if (!fn) {
    throw new Error('Route function must be provided');
  }
  return fn;
}


// App.tsx
// ...
<RouteContext.Provider value={(window as any).route}>
    <App {...props} />
</RouteContext.Provider>
// ...

Я использую этот хук в своём компоненте Header и в его дочерних HeaderLink, чтобы помечать активные ссылки, ну то есть ссылки на активную страницу. Как-то так) Всё работает. Но когда я обворачиваю Header в React.memo, то route().current() в дочерних компонентах перестаёт обновляться. Как это исправить?

const HeaderLink: React.FC<{ name: string, children: string }> =
    ({ name, children }) => {
        const route = useRoute();
        const isActive = route().current() === name;

        return (
            <CLink href={route(name)} className="relative mx-2 overflow-hidden rounded-lg flex justify-center">
                <span className={`absolute bottom-0 bg-red-600 h-0.5 transition-all ${isActive ? 'w-full' : 'w-0 '}`}/>
                <span
                    className={`
                    font-play text-lg text-gray-400 hover:text-gray-200 px-4 pb-1
                    ${isActive ? 'text-gray-200' : ''}
                `}
                >{children}</span>
            </CLink>
        );
    }

const Header: React.FC = React.memo(() => {
    const [showMobileMenu, setShowMobileMenu] = useState(false);
    const route = useRoute();

    const linksList = [
        { name: 'home', text: 'Главная' },
        { name: 'farms', text: 'Ферма' }
    ];

    return (
        <header className="flex sticky top-0 w-full h-16 justify-center shadow-xl z-10 app-bg-dark text-app-light">
            <div className="container flex items-center justify-between px-5 z-30">
                <CLink href="/">
                    <img src={logo} alt="ColorBit" className="md:h-11 h-8" />
                </CLink>

                {/* Computer menu */}
                <nav className="hidden md:block">
                    <ul className="flex">
                        {linksList.map((link, i) => (
                            <HeaderLink name={link.name} key={i}>{link.text}</HeaderLink>
                        ))}
                    </ul>
                </nav>
            </div>
        </header>
    );
});

БЛОГ НА HUSL

react обновление useContext не обновляет memo компонент

Ответы (0 шт):