Now that we have learned how the Effect Hook works, we are going to use it in our blog app, to implement the title changing when we log in/log out (when the user state changes).

Let's get started implementing an Effect Hook in our blog app:

1. Edit src/App.js, and import the useEffect Hook:

import React, { useReducer, useEffect } from 'react'

2. After defining our useReducer Hook and the state destructuring, define a useEffect Hook that adjusts the document.title variable, based on the username value:

    useEffect(() => {

3. If the user is logged in, we set the document.title to <username> - React Hooks Blog. We use template strings for this, which allow us to include variables, or JavaScript expressions, in a string via the ${ } syntax. Template strings are defined using `:

        if (user) {
            document.title = `${user} - React Hooks Blog`

4. Otherwise, if the user is not logged in, we simply set the document.title to React Hooks Blog:

        } else {
            document.title = 'React Hooks Blog'
        }

5. Finally, we pass the user value as the second argument to the Effect Hook, in order to ensure that whenever the user value updates, our effect function triggers again:

    }, [user])

If we start our app now, we can see that the document.title gets set to React Hooks Blog, because the Effect Hook triggers when the App component mounts, and the user value is not defined yet:

After logging in with Test User, we can see that the document.title changes to Test User - React Hooks Blog:

As we can see, our Effect Hook re-triggers successfully after the user value changes!