Dependency for onMount onUpdate (#145)

* first steps

* useFetch changes

* missed

* got working + tests working

* added onNewData

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* cleanup

Author: iamthesiz

README.md

@@ -89,6 +89,8 @@ Usage
 
 <details open><summary><b>Basic Usage (managed state) <code>useFetch</code></b></summary>
 
+If the last argument of `useFetch` is not a dependency array `[]`, then it will not fire until you call one of the http methods like `get`, `post`, etc.
+
 ```js
 import useFetch from 'use-http'
 
@@ -131,18 +133,20 @@ function Todos() {
 ```
 </details>
 
-<details open><summary><b>Basic Usage (no managed state) <code>useFetch</code></b></summary>
-    
+<details><summary><b>Basic Usage (no managed state) <code>useFetch</code></b></summary>
+
+This fetch is run `onMount/componentDidMount`. The last argument `[]` means it will run `onMount`. If you pass it a variable like `[someVariable]`, it will run `onMount` and again whenever `someVariable` changes values (aka `onUpdate`). **If no method is specified, GET is the default**
+
 ```js
 import useFetch from 'use-http'
 
 function Todos() {
-  const options = { // accepts all `fetch` options
-    onMount: true,  // will fire on componentDidMount (GET by default)
-    data: []        // setting default for `data` as array instead of undefined
+  // accepts all `fetch` options
+  const options = {
+    data: [],       // setting default for `data` as array instead of undefined
   }
-
-  const { loading, error, data } = useFetch('https://example.com/todos', options)
+  
+  const { loading, error, data } = useFetch('https://example.com/todos', options, []) // onMount (GET by default)
 
   return (
     <>
@@ -157,17 +161,16 @@ function Todos() {
 ```
 </details>
 
-<details open><summary><b>Basic Usage with <code>Provider</code></b></summary>
+<details open><summary><b>Basic Usage (no managed state) with <code>Provider</code></b></summary>
 
 ```js
 import useFetch, { Provider } from 'use-http'
 
 function Todos() {
   const { loading, error, data } = useFetch({
-    onMount: true,
     path: '/todos',
     data: []
-  })
+  }, []) // onMount
 
   return (
     <>
@@ -191,6 +194,42 @@ const App = () => (
 
 </details>
 
+<details open><summary><b>Pagination + <code>Provider</code></b></summary>
+
+The `onNewData` will take the current data, and the newly fetched data, and allow you to merge the two however you choose. In the example below, we are appending the new todos to the end of the current todos.
+
+```jsx
+import useFetch, { Provider } from 'use-http'
+
+const Todos = () => {
+  const [page, setPage] = useState(1)
+
+  const { data, loading } = useFetch({
+    path: `/todos?page=${page}&amountPerPage=15`,
+    onNewData: (currTodos, newTodos) => [...currTodos, ...newTodos], // appends newly fetched todos
+    data: []
+  }, [page]) // runs onMount AND whenever the `page` updates (onUpdate)
+
+  return (
+    <ul>
+      {data.map(todo => <li key={todo.id}>{todo.title}</li>}
+      {loading && 'Loading...'}
+      {!loading && (
+        <button onClick={() => setPage(page + 1)}>Load More Todos</button>
+      )}
+    </ul>
+  )
+}
+
+const App = () => (
+  <Provider url='https://example.com'>
+    <Todos />
+  </Provider>
+)
+```
+
+</details>
+
 <details open><summary><b>Destructured <code>useFetch</code></b></summary>
     
 ⚠️ The `response` object cannot be destructured! (at least not currently) ️️⚠️
@@ -548,11 +587,10 @@ const Todos = () => {
   const { loading, error, data: todos } = useFetch(globalOptions => {
     delete globalOptions.headers.Accept
     return {
-      onMount: true,
       data: [],
       ...globalOptions
     }
-  })
+  }, []) // onMount
 
   // can also do this and overwrite the url like this
   // const { loading, error, data: todos } = useFetch('https://my-new-url.com', globalOptions => {
@@ -601,46 +639,73 @@ This is exactly what you would pass to the normal js `fetch`, with a little extr
 | Option                | Description                                                               |  Default     |
 | --------------------- | --------------------------------------------------------------------------|------------- |
 | `url` | Allows you to set a base path so relative paths can be used for each request :)       | empty string |
-| `onMount` | Once the component mounts, the http request will run immediately | `false` |
-| `onUpdate` | This is essentially the same as the dependency array for useEffect. Whenever one of the variables in this array is updated, the http request will re-run. | `[]` |
+| `onNewData` | Merges the current data with the incoming data. Great for pagination.  | `(curr, new) => new` |
 | `onAbort` | Runs when the request is aborted. | empty function |
 | `onTimeout` | Called when the request times out. | empty function |
 | `retries` | When a request fails or times out, retry the request this many times. By default it will not retry.    | `0` |
 | `timeout` | The request will be aborted/cancelled after this amount of time. This is also the interval at which `retries` will be made at. **in milliseconds**       | `30000` </br> (30 seconds) |
 | `data` | Allows you to set a default value for `data`       | `undefined` |
-| `loading` | Allows you to set default value for `loading`       | `false` unless `onMount === true` |
+| `loading` | Allows you to set default value for `loading`       | `false` unless the last argument of `useFetch` is `[]` |
 | `interceptors.request` | Allows you to do something before an http request is sent out. Useful for authentication if you need to refresh tokens a lot.  | `undefined` |
 | `interceptors.response` | Allows you to do something after an http response is recieved. Useful for something like camelCasing the keys of the response.  | `undefined` |
 
 ```jsx
-useFetch({
+const options = {
   // accepts all `fetch` options such as headers, method, etc.
-  url: 'https://example.com',     // used to be `baseUrl`
-  onMount: true,
-  onUpdate: []                    // everytime a variable in this array is updated, it will re-run the request (GET by default)
-  onTimeout: () => {},            // called when the request times out
-  onAbort: () => {},              // called when aborting the request
-  retries: 3,                     // amount of times it should retry before erroring out
-  timeout: 10000,                 // amount of time before the request (or request(s) for retries) errors out.
-  data: [],                       // default for `data` field
-  loading: false,                 // default for `loading` field
-  interceptors: {                 // typically, `interceptors` would be added as an option to the `<Provider />`
+  
+  // used to be `baseUrl`. You can set your URL this way instead of as the 1st argument
+  url: 'https://example.com',
+  
+  // called when the request times out
+  onTimeout: () => {},
+  
+  // called when aborting the request
+  onAbort: () => {},
+  
+  // this will allow you to merge the data however you choose. Used for Pagination
+  onNewData: (currData, newData) => {
+    return [...currData, ...newData] 
+  },
+  
+  // amount of times it should retry before erroring out
+  retries: 3,
+  
+  // amount of time before the request (or request(s) for each retry) errors out.
+  timeout: 10000,
+  
+  // set's the default for the `data` field
+  data: [],
+  
+  // set's the default for `loading` field
+  loading: false,
+  
+  // typically, `interceptors` would be added as an option to the `<Provider />`
+  interceptors: {
     request: async (options) => { // `async` is not required
       return options              // returning the `options` is important
     },
     response: (response) => {
       return response             // returning the `response` is important
     }
   }
-})
+}
+
+useFetch(options)
+// OR
+<Provider options={options}><ResOfYourApp /></Provider>
 ```
 
-Sponsors
---------
+Who's using use-http?
+----------------------
 
 Does your company use use-http? Consider sponsoring the project to fund new features, bug fixes, and more.
 
-<a href="https://ava.inc" style="margin-right: 2rem;" target="_blank"><img width="280px" src="https://ava.inc/ava-logo-green.png" /></a>
+<a href="https://ava.inc" style="margin-right: 2rem;" target="_blank">
+  <img width="200px" src="https://ava.inc/ava-logo-green.png" />
+</a>
+<a href="https://github.com/microsoft/DLWorkspace">
+  <img height="200px" src="https://github.com/alex-cory/use-http/raw/master/public/microsoft-logo.png" />
+</a>
 
 
 Feature Requests/Ideas
@@ -745,37 +810,13 @@ Todos
     retryOnError: false,
 
     refreshWhenHidden: false,
-    
-    // this will allow you to merge the data the way you would like
-    paginate: (currData, newData) => {
-      return [...currData, ...newData]
-    },
   })
   ```
    - resources
      - [retryOn/retryDelay (fetch-retry)](https://www.npmjs.com/package/fetch-retry#example-retry-on-503-service-unavailable)
      - [retryDelay (react-query)](https://github.com/tannerlinsley/react-query)
      - [zeit's swr](https://github.com/zeit/swr)
-  - [ ] potential syntax for pagination
-  ```js
-  const App = () => {
-    const [page, setPage] = useState(1)
-    const { data, loading } = useFetch({
-      onMount: true,
-      onUpdate: [page],
-      path: `/todos?page=${page}&pageSize=15`,
-      paginate: (currData, newData) => [...currData, ...neweData],
-      data: []
-    })
-    
-    return (
-      <>
-        {data.map(item => <div key={item.id}>{item.name}</div>}
-        <button onClick={() => setPage(page + 1)}>Load More</button>
-      </>
-    )
-  }
-  ```
+
   - [ ] potential option ideas for `GraphQL`
   ```jsx
   const request = useQuery({ onMount: true })`your graphql query`