adding codepen examples to readme

Author: Alex Cory

README.md

@@ -91,6 +91,7 @@ Usage
     <li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-suspense-i22wv'>useFetch + Suspense</a></li>
 <li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-pagination-exttg'>useFetch + Pagination + Provider</a></li>
     <li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex'>useFetch + Request/Response Interceptors + Provider</a></li>
+    <li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9'>useFetch + retryOn, retryDelay</a></li>
     <li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/graphql-usequery-provider-uhdmj'>useQuery - GraphQL</a></li>
   </ul>
 
@@ -754,6 +755,44 @@ const App = () => {
 
 </details>
 
+<details><summary><b>retryOn & retryDelay</b></summary>
+
+In this example you can see how `retryOn` will retry on a status code of `305`, or if we choose the `retryOn()` function, it returns a boolean to decide if we will retry. With `retryDelay` we can either have a fixed delay, or a dynamic one by using `retryDelay()`.
+
+```js
+import useFetch from 'use-http'
+
+const TestRetry = () => {
+  const { response, get } = useFetch('https://httpbin.org/status/305', {
+    retryOn: [305]
+    // OR
+    retryOn: ({ attempt, error, response }) => {
+      // returns true or false to determine whether to retry
+      return error || response && response.status >= 300
+    },
+
+    retryDelay: 3000,
+    // OR
+    retryDelay: ({ attempt, error, response }) => {
+      // exponential backoff
+      return Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)
+      // linear backoff
+      return attempt * 1000
+    }
+  })
+
+  return (
+    <>
+      <button onClick={() => get()}>CLICK</button>
+      <pre>{JSON.stringify(response, null, 2)}</pre>
+    </>
+  )
+}
+```
+
+[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9)
+
+</details>
 
 Overview
 --------

docs/README.md

@@ -72,6 +72,7 @@ Examples
 - <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-suspense-i22wv'>useFetch + Suspense</a>
 - <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-pagination-exttg'>useFetch + Pagination + Provider</a>
 - <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex'>useFetch + Request/Response Interceptors + Provider</a>
+- <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9'>useFetch + retryOn, retryDelay</a>
 - <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/graphql-usequery-provider-uhdmj'>useQuery - GraphQL</a>
 
 Installation
@@ -575,6 +576,44 @@ const App = () => {
 }
 ```
 
+Retries
+-------
+
+In this example you can see how `retryOn` will retry on a status code of `305`, or if we choose the `retryOn()` function, it returns a boolean to decide if we will retry. With `retryDelay` we can either have a fixed delay, or a dynamic one by using `retryDelay()`.
+
+```js
+import useFetch from 'use-http'
+
+const TestRetry = () => {
+  const { response, get } = useFetch('https://httpbin.org/status/305', {
+    retryOn: [305]
+    // OR
+    retryOn: ({ attempt, error, response }) => {
+      // returns true or false to determine whether to retry
+      return error || response && response.status >= 300
+    },
+
+    retryDelay: 3000,
+    // OR
+    retryDelay: ({ attempt, error, response }) => {
+      // exponential backoff
+      return Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)
+      // linear backoff
+      return attempt * 1000
+    }
+  })
+
+  return (
+    <>
+      <button onClick={() => get()}>CLICK</button>
+      <pre>{JSON.stringify(response, null, 2)}</pre>
+    </>
+  )
+}
+```
+
+[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9)
+
 GraphQL Query
 ---------------
 
@@ -721,8 +760,8 @@ function App() {
 Hooks
 =======
 
-| Option                | Description                                                                              |
-| --------------------- | ---------------------------------------------------------------------------------------- |
+| Option                | Description        |
+| --------------------- | ------------------ |
 | `useFetch` | The base hook |
 | `useQuery` | For making a GraphQL query |
 | `useMutation` | For making a GraphQL mutation |

src/__tests__/useFetch.test.tsx

@@ -628,9 +628,7 @@ describe('useFetch - BROWSER - Overwrite Global Options set in Provider', (): vo
       () => useFetch(),
       { wrapper }
     )
-    await act(async () => {
-      await result.current.get()
-    })
+    await act(result.current.get)
     expect(fetch.mock.calls[0][0]).toBe('https://example.com')
     expect((fetch.mock.calls[0][1] as any).headers).toEqual(expectedHeaders)
     expect(fetch).toHaveBeenCalledTimes(1)
@@ -801,9 +799,7 @@ describe('useFetch - BROWSER - retryOn & retryDelay', (): void => {
     await waitForNextUpdate()
     expect(result.current.error).toEqual({ name: 400, message: 'Bad Request' })
     expect(fetch.mock.calls.length).toBe(3)
-    await act(async () => {
-      await result.current.get()
-    })
+    await act(result.current.get)
     expect(result.current.error).toEqual({ name: 400, message: 'Bad Request' })
     expect(fetch.mock.calls.length).toBe(6)
   })

src/useFetch.ts

@@ -167,7 +167,7 @@ function useFetch<TData = any>(...args: UseFetchArgs): UseFetch<TData> {
       if (!(Number.isInteger(delay) && delay >= 0)) {
         console.error('retryDelay must be a number >= 0! If you\'re using it as a function, it must also return a number >= 0.')
       }
-      attempt.current++
+      ++attempt.current
       if (delay) await sleep(delay)
       const d = await doFetch(...args)
       return d