Implement useDocumentTitle Hook in React (Interview)

As hooks are now become the essential part of the react application, learning react hooks is must and useDocumentTitle hook can be your starting point of learning react hooks.

In React applications, dynamically changing the title of a web page can enhance user experience and provide context to the user. One real-life scenario is updating the document title dynamically based on the content being displayed for the products in e-commerce application.

In this blog post, we will explore how to create a custom useDocumentTitle hook in React to manage the document title effectively. Let's go.

useDocumentTitle Hook: Understand implementation

import React, { useEffect } from 'react';

function useDocumentTitle(title) {
    useEffect(() => {
        document.title = title;
    }, [title]);
}

export default useDocumentTitle;

Code Explanation:

In the code snippet above, we define a custom hook function useDocumentTitle that accepts a title parameter. Within the useEffect hook, we set the document.title to the provided title whenever the title prop changes.

Here useEffect contains title input in the dependency array which means useEffect run every time and assign the document.title when title changes.

useDocumentTitle Hook usage

import React from 'react';
import useDocumentTitle from './useDocumentTitle';

function App() {
    // Sets the document title as Home page
    useDocumentTitle('Home Page');

    return (
        <div>
            <h1>Welcome to FrontendGeek !!</h1>
        </div>
    );
}

export default App;

In the example above, we import the useDocumentTitle hook and call it within the App component, setting the document title to 'Home Page' when the component mounts.

Conclusion

Implementing a custom useDocumentTitle hook in React can help you manage and update the document title of your web pages efficiently. By encapsulating this logic in a reusable hook, you can easily maintain consistency across your application.

Further Reading 🚀

1. Top 20 Most Asked Custom Hooks in React (Interview)
2. Best Resources to Ace React Interviews