const React = (()=>{
    let _val
    return {
        render(Component) {
            const comp = Component();
            comp.render();
            return comp;
        },
        useState(initVal) {
            const state = _val || initVal
            const setState = newVal => {
                _val = newVal
            }
            return [state, setState]
        }
    }

}
)();

function MyComponent() {
    const [foo,setFoo] = React.useState(10);
    return {
        render() {
            setFoo(foo + 1);
            console.log(`foo value is ${foo}`);
        }
    }
}

React.render(MyComponent);
React.render(MyComponent);
React.render(MyComponent);

//실행결과 
// foo value is 10
// foo value is 11
// foo value is 12

//Plain 구현
const Plain = (() => {
  //구현이 필요해....
  let _val;
  let effectFn;
  let render;
  let thisComp;

  return {
    useState(initVal) {
      let state = _val || initVal;
      const setState = newVal => {
        _val = newVal();
        this.renderComponent(thisComp);
      };
      return [state, setState];
    },

    renderComponent(Component) {
        thisComp = Component;
      const comp = Component();
      render = comp.render;

      render();
      effectFn();
      return comp;
    },
    useEffect(fn) {
      effectFn = fn;
    }
  };
})();

function plain_test() {
  const [foo, setFoo] = Plain.useState(``);

  const fireEvent = () => {
    setFoo(value => new Date().toLocaleTimeString() || value);
  };

  Plain.useEffect(() => {
    console.log(`[effect]`);
    console.log(`-----------------------`);
  });

  return {
    render() {
      console.log(`[render] : ${foo}`);
    },
    fakeEvent() {
      fireEvent();
    },
    initComponent() {
      //초기화코드가 있다면 넣을수도 있음
      this.render();
      this.useEffect();
    }
  };
}

let pd = Plain.renderComponent(plain_test);

(async function loop() {
  for (let i = 0; i < 5; i++) {
    await new Promise(resolve =>
      setTimeout(() => {
        pd.fakeEvent();
        resolve();
      }, 1000)
    );
  }
})();