React custom hook question

Tatu Tamminen — Wed, 11 Sep 2019 12:32:23 +0000

I have been implementing a React custom hook. In the project, I noticed a pattern when getting data to the React components.

first, we check do we have data already in the store (selector in the function will give the data)
if not, we dispatch an action that will have a token and parameters

As it is a crucial part of the app, I thought someone with hook experience might have a look at this.

Especially, the payload and action part. Should I use usePrevious hook and use isEqual from lodash. Or, useMemo?.

All ideas appreciated, thanks!

/* annotated version of the hook */

export function useFetchIfNeeded<T>(
  selector: (state: AppState) => T,
  action: (payload: any) => ThunkAction<any, any, any, any>,
  payload: Object,
  checkFn?: (input: T) => boolean
) {
  // redux hook
  const dispatch = useDispatch()

  // get token
  const token = useSelector((state: AppState) => state.global.token)

  // get data using the selector function
  const data = useSelector(selector)

  // use check function to verify do we need to fetch data or not
  // default is null comparison
  const check = useCallback(() => (checkFn ? checkFn(data) : data !== null), [
    checkFn,
    data
  ])
  const fetch = useCallback(() => {
    if (!token) {
      return
    }

    if (check()) {
      return
    }

    dispatch(
      action({
        ...payload,
        token
      })
    )
    // TODO: action and payload are objects, should I make my own comparison?
  }, [dispatch, token, check, action, payload])
  useEffect(() => {
    fetch()
  }, [fetch])

DEV Community: Tatu Tamminen

React custom hook question