Learn React Hooks

Implementing an Effect Hook in our blog app

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, ...