readme update

README.md

@@ -5,22 +5,22 @@
   <br/>
   UFO - Use fetch orderly
   <br/>
-  `react-ufo` helps you handle data fetching in React with no fuss
+  A simple React hook to help you with data fetching
 </p>
 
 ## Introduction
 
-When updating a UI with data retrieved from a remote server a lot of things can go wrong
+[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [Axios](https://www.npmjs.com/package/axios) help you fetching data but when you need to link the status of a request to your React state you are on your own.
 
-- You will need to handle `loading` and `error` state
-- You might have two or more requests depending on each other
-- You might want to abort pending requests in certain conditions
-- You might have to handle race conditions
+Handling the UI state related to a request can be repetitive and error-prone, especially if you have to
+
+- handle related requests within the same component
+- ignore requests results after your component is unmounted
+- abort requests in certain conditions
+- handle race conditions
 
-At first sight, these problems seem no big deal but things get out of control quite easily.
+Taking advantage of React hooks `react-ufo` helps you deal with this complexity.
 
-Taking advantage of React hooks `react-ufo` helps you deal with all this complexity.
-
 ## Installation
 
 `npm install --save react-ufo`
@@ -96,6 +96,33 @@ useEffect(()=>{
 this ensures that your `fetcher` will be invoked on mount and anytime `id` updates, which is usually what you want. 
 
 Here a basic example showing how to use `useFetcher` during mount/update [![Edit 2basicFetchOnMountAndUpdateExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2basicfetchonmountandupdateexample-k7e1q?fontsize=14&hidenavigation=1&theme=dark)
+
+### Cascading fetches
+
+Sometimes 2 requests depend on each other.
+
+Let's say that you fetched a `todo` object containing a `userId` field and you want to use `userId` to fetch a `user` object.
+
+Here how you can handle this use case with `useFetcher`
+
+```js
+
+...
+
+const [fetchTodo, [loadingTodo, todoError, todo]] = useFetcher(todoFetcher, {loading:true})
+const [fetchUser, [loadingUser, userError, user]] = useFetcher(userFetcher, {loading:true})
+
+useEffect(()=>{
+  fetchTodo(todoId).then((todo)=>{
+    fetchUser(todo.userId)
+  })
+},[todoId, fetchTodo, fetchUser])
+
+...
+
+```
+
+Here the full example showing this use case [![Edit 4cascadingFetchesExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4cascadingfetchesexample-1148s?fontsize=14&hidenavigation=1&theme=dark)
 
 ### Ignoring a pending request
 
@@ -115,7 +142,7 @@ Unfortunately in order for `callback.abort()` to work properly there is some lit
 
 `useFetcher` will take care of passing an [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) to your `fetcher` as its last argument.
 
-In order for `callback.abort()` to work you'll need to pass the abort signal to your [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+In order for `callback.abort()` to work you'll need to pass the abort signal to your [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
 
 Here an example showing how to enable fetch abortion on the `getTodo` `fetcher` presented earlier
 
@@ -132,36 +159,9 @@ If a request is marked as ignored `loading`, `error` and `data` will not be upda
 
 Here an example showing how to abort a request [![Edit 3basicAbortFetchExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3basicabortfetchexample-kf591?fontsize=14&hidenavigation=1&theme=dark)
 
-Aborting a pending request is quite easy when using [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) but it can also be achieved if you are using other libraries such as [axios](https://www.npmjs.com/package/axios)
-
-If you are wondering how to abort a request started by [axios](https://www.npmjs.com/package/axios) instead of [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) you can find an example here [![Edit abortRequestIfUsingAxiosExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/abortrequestifusingaxiosexample-fg8de?fontsize=14&hidenavigation=1&theme=dark) 
-
-### Cascading fetches
-
-Sometimes 2 requests depend on each other.
-
-Let's say that you fetched a `todo` object containing a `userId` field and you want to use `userId` to fetch a `user` object.
-
-Here how you can handle this use case with `useFetcher`
-
-```js
-
-...
-
-const [fetchTodo, [loadingTodo, todoError, todo]] = useFetcher(todoFetcher, {loading:true})
-const [fetchUser, [loadingUser, userError, user]] = useFetcher(userFetcher, {loading:true})
-
-useEffect(()=>{
-  fetchTodo(todoId).then((todo)=>{
-    fetchUser(todo.userId)
-  })
-},[todoId, fetchTodo, fetchUser])
-
-...
+Aborting a pending request is quite easy when using [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) but it can also be achieved if you are using other libraries such as [axios](https://www.npmjs.com/package/axios)
 
-```
-
-Here the full example showing this use case [![Edit 4cascadingFetchesExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4cascadingfetchesexample-1148s?fontsize=14&hidenavigation=1&theme=dark)
+If you are wondering how to abort a request started by [Axios](https://www.npmjs.com/package/axios) instead of [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) you can find an example here [![Edit abortRequestIfUsingAxiosExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/abortrequestifusingaxiosexample-fg8de?fontsize=14&hidenavigation=1&theme=dark) 
 
 ### Keeping state between fetches