react-hooks-introduction icon indicating copy to clipboard operation
react-hooks-introduction copied to clipboard

made customHook resemble more like native Hook

Open fir0j opened this issue 5 years ago • 0 comments

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 inside App() component.
  • Also since we are initializing our state object by dispatching init action, passing isLoading and isError 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.

fir0j avatar Jan 10 '20 11:01 fir0j