Using the effect Hook

In this section, we will learn about the effect Hook and where it is useful. We will then create a new React project and a component that makes use of the effect Hook.

Understanding the effect Hook parameters

The effect Hook is used for component side effects. A component side effect is something executed outside the scope of the component such as a web service request. The effect Hook is defined using the useEffect function from React. useEffect contains two parameters:

• A function that executes the effect; at a minimum, this function runs each time the component is rendered
• An optional array of dependencies that cause the effect function to rerun when changed

Here’s an example of the useEffect Hook in a component:

function SomeComponent() {
  function someEffect() {
    console.log("Some effect");
  }
  useEffect(someEffect);
  return ...
}

The preceding...