If you observe common state logic in many components make a custom hook
React hooks are very useful when you want to take out common logic out of your components.
In our live projects we make some components which makes API calls, parse data and display it to the user.
There are lot of state transitions happening behind this.
* Initial State
* Loading
* Data Received
These 3 are the common state transitions for each and every component, which means we can create a custom hook out of it.
Now, let's make a custom hook.
Custom Hook
import { useEffect, useReducer, useCallback } from 'react';
const INITIAL_STATE = {
data: undefined,
isLoading: false,
hasError: false,
};
/**
* Hook to fetch data and handling loading and error state.
* @param {Promise} fetchData promise to fetch data. [Dependancy]
* @param {Array} params parameters to pass to fetch data. [Dependancy]
*/
const useFetchData = (fetchData, params = EMPTY_ARRAY, initialState = INITIAL_STATE) => {
const [state, dispatch] = useReducer(REDUCER, initialState);
const usefetchDataEffect = useCallback(() => fetchDataEffect(dispatch, fetchData, params), [fetchData, ...params]);
useEffect(usefetchDataEffect, [usefetchDataEffect]);
return [state, { fetchData: usefetchDataEffect }];
};
export default useFetchData;
Helper Functions
const setLoading = dispatch => dispatch({ type: 'SET_LOADING' });
const setError = dispatch => dispatch({ type: 'SET_ERROR' });
const setData = (dispatch, data) => dispatch({
type: 'SET_DATA',
payload: { data },
});
/**
* Fetches and saves Data.
* Handles Error.
* @param {Promise} fetchData promise which returns data
* @param {Array} params parameters to be passed to fetchData promise
* @param {Function} dispatch function to update state
*/
const fetchDataEffect = (dispatch, fetchData, params) => {
setLoading(dispatch);
fetchData(...params)
.then((data) => {
setData(dispatch, data);
})
.catch(() => {
setError(dispatch);
});
}
Usage
const [{ isLoading, hasError, data: componentData }, { fetchData }] = useFetchData(fetchComponentData, [dependency]);
NOTE
Try to parse the API response in fetchComponentData function so the component receives parsed data to display.
For simplicity, I have not included definition of reducers.
Top comments (0)