CODEWITHSUNDEEP
reactjsreduxreact-hooks
Wong
Wong

Reputation: 79

React - Maximum update depth exceeded

I am using useAxios hook to fetch data from Api then use add data to global state by Constate library. However, I am getting error: "Maximum update depth exceeded ". So, how to make it work ? Also, what is best practice to handle asynchronous Api and global state in my use case ?

In index Component: 

  const {loading, error} = useGetFavoriteTracks()
  const {state} = useTrackContext()

In useGetFavoriteTracks.js, fetch data then add favorite tracks to global state

export const useGetFavoriteTracks = params => {
  const { data, error, loading } = useAxios({
    axiosInstance: myApiAxiosInstance,
    url: myApiEndPoint.FAVORITE_TRACKS
  });

  const { addFavoriteTracks } = useTrackContext();
  addFavoriteTracks(data); //add favorite tracks to global state
  return { loading, error };
};

TrackContext.js

const useTrack = params => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const addFavoriteTracks = (data) => {  
    dispatch({
        type: trackActionTypes.FAVORITE_TRACKS_FETCHED_SUCCESS,
        payload: data
    })  
  }
  return {state, addFavoriteTracks}
}
export const [TrackProvider, useTrackContext] = constate(useTrack);

Upvotes: 0

Views: 265

Answers (1)

hackape
hackape

Reputation: 19947

Rule of thumb: any direct or indirect call to setState or dispatch must not be fired in the process of rendering.

In useGetFavoriteTracks you must not unconditionally call addFavoriteTracks(data); like that. Put that call inside useEffect. 

useEffect(() => {
  if (!loading && data) addFavoriteTracks(data);
}, [loading, data])

Upvotes: 1

Related Questions