import React from "react";

const state = [];
const setters = [];
let cursor = 0;
let isFirstRender = true;

function createSetter(cursor) {
  return newValue => {
    state[cursor] = newValue;
  };
}

function useState(initalValue) {
  if (isFirstRender) {
    state.push(initalValue);
    setters.push(createSetter(cursor));
  }

  const setter = setters[cursor];
  const value = state[cursor];

  cursor++;
  return [value, setter];
}

function ButtonUsingHooks() {
  const [firstName, setFirstName] = useState("Bar");
  const [lastName, setLastName] = useState("Baz");
  if (isFirstRender) {
    isFirstRender = false;
  }

  return (
    <div>
      {firstName} {lastName}
      <button
        onClick={() => {
          setFirstName("First");
        }}
      >
        First
      </button>
      <button onClick={() => setLastName("Last")}>Last</button>
    </div>
  );
}

function App() {
  cursor = 0;
  return (
    <div className="App">
      <ButtonUsingHooks />
    </div>
  );
}

export default App;