watch behavior differing from useEffect can be confusing

[loganyott]

useEffect is a common way to load async data right now in React. useEffect supports watching specific dependencies.

const [value, setValue] = useState();

useEffect(() => {
  setData(myFetchFn({ value });
  return cancel;
}, [value]);

Now if I update value, I automatically get updated data.

react-async supports something similar

const [value, setValue] = useState();

const { data } = useAsync({ promiseFn: myFetchFn, value, watch: value })

However, when I first did this, I expected watch to follow useEffect's syntax of passing an array of dependencies rather than it watching the primitive value. ex: watch: [value]

It would be great if react-async treated an array being passed in to watch similar to the dependency array in useEffect as it's a little confusing coming from useEffect why passing an array causes an infinite render loop.

[Ciccio99]

I second this. The current way also prevents you from watching multiple values.

[ghengeveld]

This would be a breaking change, but I can get behind adding special handling for arrays. Feel free to open a PR. For now, you can achieve what you want using watchFn:

useAsync({
  deps: [...],
  watchFn: (props, prevProps) => JSON.stringify(props.deps) === JSON.stringify(prevProps.deps)
})

There's better/faster ways to compare two arrays, but this is the simplest way.

In fact you can use the stringify trick with watch itself:

useAsync({
  watch: JSON.stringify([ ... ])
})