Cacher is the code snippet organizer for pro developers

import React, { useEffect } from "react";

// Hook similar to componentDidMount, componentDidUpdate
// Trigger when component is rendered

// useEffect(() => {
//   console.log("[Cockpit.js] useEffect");
//   // Http request...

//   setTimeout(() => {
//     alert("save data to cloud!");
//   }, 1000);
// }, [props.persons]); // if we want have dependency on a certain field

useEffect(() => {
  console.log("[Cockpit.js] useEffect");
  // Http request...

  setTimeout(() => {
    alert("save data to cloud!");
  }, 1000);
}, []); // pass empty array only trigger on initial render

// useEffect(); // can be used multiple times

useEffect(() => {
  console.log("[Cockpit.js] useEffect");
  // Http request...

  setTimeout(() => {
    alert("save data to cloud!");
  }, 1000);
  return () => {
    console.log("[Cockpit.js] cleanup work in useEffect"); // можно использовать return, и будет отрабатывать как ниже componentWillUnmount (когда элемент удаляется), но надо также пустой [] оставлять
  };
}, []);

componentWillUnmount() {
  console.log("[Persons.js] componentWillUnmount"); //before the component is removed
}