import React, { useState, useEffect } from 'react';


const UseEffectCleanup = () => {
  
  const [width, setWidth] = useState(window.innerWidth);

  const checkSize = () => {
    setWidth(window.innerWidth)
  }

  useEffect(() => {

    window.addEventListener('resize', checkSize)
    return () => {
      window.removeEventListener('resize', checkSize)
    }
  }, [width]);

  return (
    <>
      <h1>Window Size</h1>
      <h2>{`${width}px`}</h2>
    </>
  );

}


export default UseEffectCleanup;

const Component = ({ receiveAmount, sendAmount }) => {
  const prevAmount = useRef({ receiveAmount, sendAmount }).current;
  useEffect(() => {
    if (prevAmount.receiveAmount !== receiveAmount) {
     // process here
    }
    if (prevAmount.sendAmount !== sendAmount) {
     // process here
    }
    return () => { 
      prevAmount.receiveAmount = receiveAmount;
      prevAmount.sendAmount = sendAmount;
    };
  }, [receiveAmount, sendAmount]);
};

index.js

import MeetupList from "./../components/meetups/MeetupList";
import { useEffect } from "react";
import { useState } from "react";

const data = [
  {
    id: "m1",
    title: "A first meetup",
    image: “/location.jpg”,
    address: "Some address 10, 12345 Some city",
    description: "This is a first meetup!",
  },
  {
    id: "m2",
    title: "A second meetup",
    image:“/location.jpg”,
    address: "Some address 20, 6789 Some city",
    description: "This is a second meetup!",
  },
];

const HomePage = () => {
  const [loadedMeetups, setLoadedMeetups] = useState([]);

  useEffect(() => {
    // send http request and fetch data
    setLoadedMeetups(data);
  }, []);

  return (
    <>
      <MeetupList meetups={loadedMeetups} />
    </>
  );
};

export default HomePage;