7.11 Controlling useEffect Behavior

If Person component Changed

Cockpit.js

import React, { useEffect } from "react";
import classes from "./Cockpit.css";

const cockpit = (props) => {
  useEffect(() => {
    console.log("[Cockpit.js] useEffect");
    // Http request...
    setTimeout(() => {
      alert("Saved data to cloud!");
    }, 1000);
  }, [props.persons]);

  // useEffect()

  const assignedClasses = [];
  ...

If first time Person Component renders

= componentDidMount

Cockpit.js

import React, { useEffect } from "react";
import classes from "./Cockpit.css";

const cockpit = (props) => {
  useEffect(() => {
    console.log("[Cockpit.js] useEffect");
    // Http request...
    setTimeout(() => {
      alert("Saved data to cloud!");
    }, 1000);
  }, []);

  // useEffect()

  const assignedClasses = [];