<div id="root"></div>

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container {
  width: 100%;
  max-width: 1300px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}


header {
  background-color: #282c34;
  color: white;
  padding: 20px 0;
}
h1 {
  margin: 0;
}
h2 {
  margin-bottom: 40px;
}
main {
  margin-top: 40px;
}
p span {
  color: green;
  font-weight: bold;
}
.light,
.dark {
  font-family: sans-serif;
  text-align: center;
  height: 300px;

  display: flex;
  align-items: center;
  justify-items: center;
}

.light div,
.dark div {
  margin: 0 auto;
}

.dark {
  background: black;
  color: white;
}

.button-container button {
  background: black;
  border: 0px;
  height: 30px;
  margin: 10px;
}

.light .button-container button {
  color: white;
}

.dark .button-container button {
  background: white;
}

const {useState, useEffect} = React;

const SomeComp = ({ someFunc }) => {
  const [calcNum, setCalcNum] = useState(0);
  useEffect(() => {
     setCalcNum(someFunc());
  }, [someFunc]);
return <span> Plus five: {calcNum}</span>;
};

const App = () => {
    const [num, setNum] = useState(0);
  const [light, setLight] = useState(true);
  const plusFive = () => {
    console.log("I was called!");
    return num + 5;
  };
  return (
    <div className={light ? "light" : "dark"}>
      <div>
        <h1>Without useCallback </h1>
        <h2>
          Current number: {num},
          <SomeComp someFunc={plusFive} />
        </h2>
        <div className="button-container">
          <button
            onClick={() => {
              setNum(num + 1);
            }}
          >
            Update Number{" "}
          </button>
          <button
            onClick={() => {
              setLight(!light);
            }}
          >
            {" "}
            Toggle the light{" "}
          </button>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(
  <div className="App">
        <header>
          <div className="container">
            <h1>React Hooks</h1>
          </div>
        </header>
        <main>
          <div className="container">
            <App/>
          </div>
        </main>
      </div>,
  document.getElementById('root')
);