React hook simple implementation

by de Montalembert Jonathan

JavaScript

let MyReact = (function() {
  let currentHook = 0,
    hooks = []

  return {
    render: (Component) => {
      let inst = Component()

      inst.render();
      currentHook = 0
      return inst;
    },

    useEffect: (fn, deps) => {
      const hasNoDeps = !deps
      const previousDeps = hooks[currentHook]
      const depsChanged = previousDeps ? !deps.every((dep, i) => dep == previousDeps[i]) : true
      if (hasNoDeps || depsChanged) {
        fn()
        hooks[currentHook] = deps
      }
      currentHook++;
    },

    useState: (initialState) => {
      const localHook = currentHook
      hooks[localHook] = hooks[localHook] || initialState

      const setState = (newState) => {
        hooks[localHook] = newState
      }

      currentHook++;

      return [hooks[localHook], setState]
    }

  }

})()

function Counter() {
  const [counter, setCounter] = MyReact.useState(9)
  const [text, setText] = MyReact.useState("Hello")
  MyReact.useEffect(() => {
    console.log('effect', counter, text)
  }, [counter, text])
  return {
    click: () => setCounter(counter + 1),
    onChange: (text) => setText(text),
    render: () => {
      console.log('hello', counter, text)
    }
  }
}

let App
App = MyReact.render(Counter)

App.click()

App = MyReact.render(Counter)

App.onChange("World")
MyReact.render(Counter)