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

const Counter = ({ notify }) => {
  const [value, setValue] = useState(0);

  useEffect(() => {
    notify(value);
  }, [value, notify]);

  return <button onClick={() => setValue(value + 1)}>Increment</button>;
};

const CounterNotifier = ({ url }) => {
  const handleNotify = value => api.send(url, value); // ❌ This way we're redefining the callback on each render

  return (
    <div>
      <p>{`Notifing even values to ${url}`}</p>
      <Counter notify={handleNotify} />
    </div>
  );
};