Component not re-rendering on route change due to stale ref in Next.js App Router

[mwangimuringi]

In my Next.js project using the App Router (app directory), I'm using a ref to manage DOM elements. When navigating between pages, the page content doesn't update correctly, and the component seems to hold onto stale state from the previous page. I suspect it's due to the ref not being reset or updated on route changes.

[mwangimuringi]

Hey @NestorMugambi , I noticed that the issue with the ref still persists after applying the fix. It looks like the ref is not being reset on route changes, possibly due to caching issues. Here's a snippet of what I tried:

useEffect(() => { router.events.on('routeChangeComplete', () => { if (inputRef.current) inputRef.current.value = ''; });

return () => { router.events.off('routeChangeComplete'); }; }, [router]);