No need for a hook to change the page title

src/Hero.tsx

@@ -3,8 +3,8 @@ import { useParams } from 'react-router';
 
 import * as Marvel from './api/Marvel';
 import { assert } from './utils/assert';
+import { setPageTitle } from './utils/setPageTitle';
 import { useErrorHandler } from './utils/useErrorHandler';
-import { usePageTitle } from './utils/usePageTitle';
 
 function Category({ character, category }: { character: Marvel.Character; category: string }) {
   return (
@@ -17,7 +17,7 @@ function Category({ character, category }: { character: Marvel.Character; catego
 }
 
 function Character({ character }: { character: Marvel.Character }) {
-  usePageTitle(character.name);
+  setPageTitle(character.name);
 
   return (
     <section className="hero">
@@ -42,7 +42,7 @@ export function Hero() {
   // Could also be a variable outside instead of a ref
   const controller = useRef<AbortController>();
 
-  usePageTitle('...');
+  setPageTitle('...');
 
   const handleError = useErrorHandler();
   const [character, setCharacter] = useState<Marvel.Character>();

src/Heroes.tsx

@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import * as Marvel from './api/Marvel';
+import { setPageTitle } from './utils/setPageTitle';
 import { useErrorHandler } from './utils/useErrorHandler';
-import { usePageTitle } from './utils/usePageTitle';
 import { config } from './config';
 
 function Characters({ characters }: { characters: Marvel.Characters }) {
@@ -38,7 +38,7 @@ export function Heroes({ page }: Props) {
   // Could also be a variable outside instead of a ref
   const controller = useRef<AbortController>();
 
-  usePageTitle(`Page ${page}`);
+  setPageTitle(`Page ${page}`);
 
   const handleError = useErrorHandler();
 

src/utils/setPageTitle.test.ts

@@ -0,0 +1,6 @@
+import { setPageTitle } from './setPageTitle';
+
+test('setPageTitle()', () => {
+  setPageTitle('3-D Man');
+  expect(document.title).toEqual('3-D Man - Marvel Heroes');
+});

src/utils/setPageTitle.ts

@@ -0,0 +1,3 @@
+export function setPageTitle(title: string) {
+  document.title = `${title} - Marvel Heroes`;
+}