useProxy

Built-in hooks used in this custom hook: useState, useEffect, and useRef

The thinking behind either fixing or improving the React state never ends. One cool idea originates from the question "why can't we just do a plain assignment for states instead of using the dispatch approach?" One of the technical issues blocking us is that the assignment can't be done unless there's an object or something to hold the state. So, if we were to allow the storing of properties under an object like so:

  const p = useProxy({ count: 0, text: '' })

Then we could turn a dispatch into an assignment like the following:

  p.count++
  p.text = 'Hello World'

Let's take a look at how we can design such things with the help of the Proxy introduced by ES6:

const useProxy = (initialObj) => {
  const [,dispatch] = useState(initialObj)  
  const [obj] = useState(new Proxy...