useTitle

React, Hooks, Effect

Sets the title of the page

  • Use typeof to determine if the document is defined or not.
  • Use the useRef() hook to store the original title of the document, if defined.
  • Use the useEffect() hook to set Document.title to the passed value when the component mounts and clean up when unmounting.
const useTitle = title => {
  const documentDefined = typeof document !== 'undefined';
  const originalTitle = React.useRef(documentDefined ? document.title : null);

  React.useEffect(() => {
    if (!documentDefined) return;

    if (document.title !== title) document.title = title;

    return () => {
      document.title = originalTitle.current;
    };
  }, []);
};
const Alert = () => {
  useTitle('Alert');
  return <p>Alert! Title has changed</p>;
};

const MyApp = () => {
  const [alertOpen, setAlertOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setAlertOpen(!alertOpen)}>Toggle alert</button>
      {alertOpen && <Alert />}
    </>
  );
};

ReactDOM.render(<MyApp />, document.getElementById('root'));

Recommended snippets

  • useTimeout

    React, Hooks

    Implements setTimeout in a declarative manner.

  • useInterval

    React, Hooks

    Implements setInterval in a declarative manner.

  • Wrapping your mind around React hooks and how they interact with setInterval() can be difficult. Here's a guide to get you started.