React

Side effects

import { useState } from "react";

const App = () => {
  const [isCounterVisible, setIsCounterVisible] = useState(false);

  const handleClick = () => setIsCounterVisible(isCounterVisible => !isCounterVisible);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-4 rounded"
        onClick={handleClick}
      >
        {isCounterVisible ? "Unmount Counter" : "Mount Counter"}
      </button>
      {isCounterVisible && <Counter />}
    </div>
  );
};

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(prevCount => prevCount + 1);

  return (
    <div className="text-center mt-2 pt-6 border rounded-md shadow-lg">
      <p className="text-lg font-bold">Count = {count}</p>
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 mt-2 rounded"
        onClick={handleClick}
      >
        Increase count
      </button>
    </div>
  );
};

export default App;