react-hooks-introduction
react-hooks-introduction copied to clipboard
made customHook resemble more like native Hook
Before
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
...
}
function App() {
const [query, setQuery] = useState('redux');
const [{ data, isLoading, isError }, doFetch] = useDataApi(
'http://hn.algolia.com/api/v1/search?query=redux',
{ hits: [] },
);
...
}
After
// passed initial url as the default parameter
const useDataApi = (initialData, initialUrl = 'http://hn.algolia.com/api/v1/search?query=redux') => {
const [ url, setUrl ] = useState(initialUrl);
const [ state, dispatch ] = useReducer(dataFetchReducer, {
// passing isLoading and isError property is redundant here
data: initialData
});
...
}
function App() {
const [ query, setQuery ] = useState('redux');
const [ result, setUrl ] = useDataApi({ hits: [] });
const { data, isLoading, isError } = result;
...
}
- I think passing single argument in
useDataApi()
resemble more like native hook insideApp()
component. - Also since we are initializing our state object by dispatching init action, passing
isLoading
andisError
are redundant in my opinion.
please let me know what you think of it ?
- if you like these
small changes
, add me to the contributor.