Using Effect Hooks

The Effect Hook is an important Hook to synchronize your components with external systems, such as external APIs or the browser APIs. However, it is often overused in React code. If there is no external system involved, you should not use an Effect Hook.

In the case of our blog, we are going to implement a way to check whether the user has an admin role in the Logout component. For simplicity, and to focus on the Effect Hook itself, we are simply going to mock this check, but imagine that this is being done by an external API.

Remember componentDidMount and componentDidUpdate?

If you have worked with older React versions before, you have probably used the componentDidMount and componentDidUpdate life cycle methods. For example, if we wanted to set the title of a web page to a given prop using React class components, we would need to add the following life cycle method:

import React from 'react'
class App extends React.Component {
  componentDidMount...