How to set the Document title in reactJS

To set the document title in reactJS, we can create a custom hook and use it. The following is the solution.

export function setTitle(title) {
  useEffect(() => {
    const oldTitle = document.title
    document.title = title
    return () => {
      document.title = oldTitle
    }
  }, []);
}

Now, use the above custom hook in whichever component you want.

const ExComponent = () => {
  setTitle("The new title")
  return (
    <div>
     ...
    </div>
  )
}

The above custom hook updates the title with the current component title when the component mounts and modifies it to the previous title when the component unmounts.

In a class-based component, You can also do it by installing a package called Helmet.

import React from 'react'
import { Helmet } from 'react-helmet'

const Title = 'Page Title'

class ExComponent extends React.PureComponent {
  render () {
    return (
      <>
        <Helmet>
          <title>{ Title }</title>
        </Helmet>
        ...
      </>
    )
  }
}