Messing with
Document Title & React
wei / is fe / 02 20 2020
“Kaya Toast should allow users to set document title”
so I thought
document title
was easy
document.title = "kaya toast"?
import * as React from 'react';
const useTitleNaive = title => {
React.useEffect(() => {
document.title = title;
}, [title]);
};
export default () => {
useTitleNaive('hello!');
return <>title should be "hello!"</>;
};
why u no work?
react helmet
is managing the relevant tags
problem 1
setting title is a global side effect that persists
problem #2
when multiple <Title /> components (or equivalent hooks) are mounted, it is hard to reason who wins
problem #3
import * as React from 'react';
const useTitleNaive = title => {
React.useEffect(() => {
document.title = title;
}, [title]);
};
const Component = ({ title }) => {
useTitleNaive(title);
return <div>component sets the title to {title}</div>;
};
export default () => {
useTitleNaive('page');
return (
<>
page sets title to "page"
<Component title="component" />
</>
);
};
import * as React from 'react';
const Title = () => {
const useTitleNaive = title => {
React.useEffect(() => {
document.title = title;
}, [title]);
};
}
const Component = ({ title }) => {
return <div>
<Title>{title}</Title>
component sets the title to {title}</div>;
};
export default () => {
return (
<>
<Title>Page</Title>
page sets title to "page"
<Component title="component" />
</>
);
};
how do other people do it?
how does
SPACE
do it
import { useState, useEffect } from 'react'
import { space, types } from '@space/core'
import { withRouter } from 'react-router-dom'
const DEFAULT_TITLE = 'Space'
function Title ({ location }) {
const [title, setTitle] = useState(DEFAULT_TITLE)
const { pathname } = location
useEffect(() => {
const menuItems = space.get(types.MENU_ITEMS)
const newTitle = findMenuTitle(menuItems, pathname) || DEFAULT_TITLE
document.title = (newTitle === DEFAULT_TITLE) ? newTitle : `SPACE | ${newTitle}`
setTitle(newTitle)
}, [pathname])
return title
}
function findMenuTitle (menuItems, pathname) {
for (const { items } of menuItems) {
for (const { headerTitle, to } of items) {
if (pathname.startsWith(to)) {
return headerTitle
}
}
}
return null
}
export default withRouter(Title)
key reading
- sets title on every page (so "global effect" is acceptable)
- reads from url and finds title from page - url map
desired behavior and implementation are in play
how does
React Helmet
do it
we need to talk about React Side Effects
key concept
allows you to work on
all instances
of a component as a whole
so you can
determine who wins
when you have multiple <Title /> components
what happens under the hood
- componentWillMount, componentDidUpdate: emitChange()
- componentWillUnmount: remove the instance and emitChange()
- emitChange():
- calls reducePropsToState for you to turn relevant props to state
- calls mapStateOnServer to execute side effects
recap
- handles side effects from all instances of a component altogether
- allows users to define a winning prop after iterating through all instances
- acts in 2 phases
- reduce props to state
- execute side effects (client or server)
- relies on class components' static properties
typical usages of
React Side Effects?
Dan Abramov:
React Document Title
(thanks! / just kidding)
can we create states for a class of components with hooks?
extra credit problem
back to our home-cooked document title
arguably desired behavior for Kaya Toast
> layout renders a “default” title, which individual pages and / or components can then overwrite
> leaving the page or unmounting the component “resets” the title back to a “clean state”
import * as React from 'react';
import { useLayoutContext } from '../../components/Layout/context';
type TitleProps = { children: string };
const Title = ({ children: title }: TitleProps) => {
const { siteName } = useLayoutContext();
React.useEffect(() => {
document.title = title || siteName;
}, [title]);
return null;
};
export default Title;
what's the more intuitive API design?
utility hook?
declarativecomponent?
const MyPage = () => {
useTitle('Kaya Toast');
return <div />
}const MyPage = () => {
return <div>
<Title>Kaya Toast</Title>
</div>;
}we're effectively lying, it's not rendering any tags there and it's calling a side effect hook under the hood
it feels it should stay there even after the component unmounts