usePureState about react-use

[dpikt]

Could this be implemented via a hook that allows a custom comparator function to be used for state updates? It looks like useState already avoids re-renders for shallowly equal updates, we would just need to expand the concept of what an "equal" update is.

// using default useState comparator 
const [ state, setState ] = useDistinctState('a')
setState('A') // will update
...
// using a custom comparator
const [ state, setState ] = useDistinctState('a', 
    (prev, next) => prev.toUpperCase() === next.toUpperCase()
)
setState('A') // won't update
...
// solving issue use case
function usePureState (initialValue) {
   return useDistinctState(initialValue, shallowEqual)
}

(I just came from reading #92 so that's part of my consideration here.)

[streamich]

react-fast-compare does deep compare, as I understand, not shallow.

[streamich]

Do you mean it would not re-render if props didn't change?

[revskill10]

Could react-fast-compare help here ?

[cloudever]

I mean that if use useState with object like this.setState, it would be great to skip update using shallow compare of object values like that

function Component() {
  const [state, setState] = usePureState({ a: 1, b: 2 })

  // skip update
  setState({ a: 1 }) // merges automatically
  // updates
  setState({ a: 2})
 
}

[streamich]

Yeah, sounds like something useful. I guess, could be easy to do, too, just with just a single loop that shallow-checks all values.

[chriswilty]

This is how React do shallowEquals:
https://github.com/facebook/react/blob/master/packages/shared/shallowEqual.js

I would hope that usePureState could get included as a built-in hook. Saves us all re-implementing (read copy-pasting) the above comparator.