const { useState, useEffect } = React;

const Counter = () => {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    if (count > 10) {
      alert(`${count} is over 10.`);
    } else if (count < 0) {
      alert(`${count} is under 0.`);
    }
  }, [count]);

  return (
    <>
      <p>Count is {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>
        + 1
      </button>
      <span>  </span>
      <button onClick={() => setCount((c) => c - 1)}>
        - 1
      </button>
    </>
  );
};

ReactDOM.render(<Counter />, document.getElementById('app'));