Override next/head title tag using document.title
Unanswered
Japanese common catfish posted this in #help-forum
Japanese common catfishOP
When I load my app, I set the
FWIW here is how I am trying to update the title.
title using the next/head component. However, I later want to update the title (both in the head and in the browser tab) using document.title, but it seems this value always gets reset to the initial value that was set using the next/head component.FWIW here is how I am trying to update the title.
useEffect(() => {
if (updatedTitle) {
document.title = updatedTitle;
}
}, [updatedTitle]);5 Replies
@Japanese common catfish When I load my app, I set the `title` using the `next/head` component. However, I later want to update the `title` (both in the `head` and in the browser tab) using `document.title`, but it seems this value always gets reset to the initial value that was set using the `next/head` component.
FWIW here is how I am trying to update the title.
javascript
useEffect(() => {
if (updatedTitle) {
document.title = updatedTitle;
}
}, [updatedTitle]);
Why not just
<Head>
<title>{updatedTitle}</title>
</Head>?
<Head>
<title>{updatedTitle}</title>
</Head>?
Japanese common catfishOP
Thanks, that is what I am currently doing, but my specific issue is wanting to update the value as infinite scroll items come into view when scrolling down. (This is not an issue, using
<Head /> like you said.) But I also want to update the value to the old ones when scrolling back up. So I thought an imperative set of document.title would be the most straightforward.@Japanese common catfish Thanks, that is what I am currently doing, but my specific issue is wanting to update the value as infinite scroll items come into view when scrolling down. (This is not an issue, using `<Head />` like you said.) But I also want to update the value to the old ones when scrolling back up. So I thought an imperative set of `document.title` would be the most straightforward.
I think that’s a bad idea. Your approach is the same as something like
useEffect(() => {
document.getElementById("foo").innerHTML = count;
}, [count]);
<button onClick={() => setCount(count + 1)} id="foo" />
useEffect(() => {
document.getElementById("foo").innerHTML = count;
}, [count]);
<button onClick={() => setCount(count + 1)} id="foo" />
Just do it the declarative react way
Japanese common catfishOP
I agree. Possibly I need to revisit my component tree and when I am rendering/updating the
next/head component. Thanks!