Add useFetcher({ onData }) callback

[okalil]

The useFetcher hook makes the response data available through the "data" field (fetcher.data). This way we don't need to control the state ourselves, which is great most of the time.
However, when we need to have more control over how the state is updated (for example, persisting previous values ​​of "data") we need to resort to additional states, effects and conditionals, making the code more complex.
A classic example is infinite scroll implementation, which could currently be implemented like this:

const [pages, setPages] = useState([loaderData.posts])
const fetcher = useFetcher() // { offset: number, data: T[] }
if (!fetcher.data?.error && !pages[fetcher.data.offset]) {
  setPages([...pages, fetcher.data.data])
}
const posts = pages.flat()

Another approach is using useEffect.

const [posts, setPosts] = useState(loaderData.posts)
const fetcher = useFetcher()
useEffect(() => {
 if (fetcher.data?.error) return
 setPages([...posts, ...fetcher.data.data])
}, [fetcher.data])

It works, but feels hacky...
With the onData callback the code would be way clearer

const [posts, setPosts] = useState(loaderData.posts)
const fetcher = useFetcher({
 onData: (data) {
   if (data.error) return
   setPosts([...posts, ...data.data])
 }
})

[akamfoad]

I believe if fetcher were class instances, they'd be very familiar to DOM which has a very good API, like below

class Fetcher extends EventTarget{
  constructor(){
    super()
  }

  // rest of implementation
}

const fetcher = useFetcher()

useEffect(()=>{
  const handler = (event)=>{
    const { data } = event
    setSomeState(data)
  }

  fetcher.addEventListener("data", handler)
  return ()=> fetcher.removeEventListener("data", handler)
}, [])