Events for useFetcher

[LonJonn]

I saw this tweet by @kiliman and thought it was a very interesting approach, but I didn't like the use of effects everywhere to handle when a particular fetcher event occurred e.g.

  useEffect(() => {
    if (commentLoader.type === 'done') {
      // ... do something on commentLoader done
    }
  }, [commentLoader.type])

  useEffect(() => {
    if (commentPoster.type === 'actionSubmission') {
      // ... do something on commentPoster actionSubmission
    }
    if (commentPoster.type === 'done') {
      // ... do something else on commentPoster done
    }
  }, [commentPoster.type])

I think allowing users to pass event handlers to the fetchers might be a useful feature, and I wanted to start a discussion. I'd imagine an API like:

const myFetcher = useFetcher({
    onDone(state) {
      // ... do something when fetcher is done
      // state is just a discriminated reference to myFetcher with `type: "done"`, giving access to myFetcher.data
      console.log(state.data);
    },
  })

I was able to put together an example custom hook that achieves what I'm proposing (however, it still uses effects under the hood):

type FetcherType = Fetcher<any>["type"];
type FetcherEvent = `on${Capitalize<FetcherType>}` // Could use template literal types to create `onDone` for e.g. but this example doesn't
function useFetcherWithEvents<TData = any>(
  handlers: { [type in FetcherType]?: (state: Fetcher<TData> & { type: type }) => void },
) {
  const fetcher = useFetcher<TData>()

  // Ideally, the handlers object would preserve referential equality so we could omit it from the dependency array
  useEffect(() => {
    handlers[fetcher.type]?.(fetcher)
  }, [fetcher])

  return fetcher
}

// ... usage

  const commentLoader = useFetcherWithEvents({
    done() {
      console.log('comments loaded')
      send('COMMENTS_LOADED')
    },
  })

  const commentPoster = useFetcherWithEvents({
    actionSubmission(state) {
      console.log(state.submission)
      commentRef.current!.value = ''
    },
    done(state) {
      console.log('comment submitted', state.data)
      send('COMMENT_SUBMITTED')
    },
  })

Would this be something the Remix team might consider adding or will useEffect remain the recommended approach?

[kiliman]

Generally the Remix team doesn’t like to add to the API things you can do in userland. I would extend with custom hooks or wrappers. If it seems useful and covers a broad base of usecases then it may end up in the core.

Remix is moving to support multiple UI frameworks so the more surface area an API has the harder it may be to migrate.