useDistinct

[benneq]

I'd like to have some useDistinct hook, which takes a value (or another hook) and only changes state if the returned value has changed.

It's kinda the opposite way of useMemo. It should rerender based on output instead of input value.

I'm not sure if that's possible at all...

Usage:

const compareFn = (oldValue, newValue) => {
    return oldValue[0] === newValue[0];
}

const MyComponent = (props) => {
    const [state, setState] = useDistinct(useState("foo"), compareFn);
  
    console.log("rerendered", state)

    return (
      <button onClick={() => setState("foo")}>Change State</button>
    )
}

Explanation:
When not using useDistinct, every call to setState will rerender the component. Even if you call setState(state).
When using useDistinct, it should check for === equality. Or you can provide a custom comparison function which does the equality check.

[streamich]

If your function is pure it should be the same as memoizing input arguments.

[benneq]

Of course the purpose are non-pure functions as well 😄

Something like useRouter, which takes no input arguments, but produces values when for example the user changes the URL.

I tried to play around with useCallback and useMemo, but I couldn't figure out a solution. It always rerenders.

[dpikt]

@benneq I'm unable to reproduce the use case you provided- it only logs "rendered" once, even after I pressed the button. For reference, I'm using react 16.8.6.