async-library · markusylisiurunen · Aug 4, 2019 · Aug 4, 2019 · Aug 4, 2019 · Aug 4, 2019
diff --git a/README.md b/README.md
@@ -333,6 +333,7 @@ These can be passed in an object to `useAsync()`, or as props to `<Async>` and c
 - `watch` Watch a value and automatically reload when it changes.
 - `watchFn` Watch this function and automatically reload when it returns truthy.
 - `initialValue` Provide initial data or error for server-side rendering.
+- `skipOnMount` Skip running `promiseFn` on mount, useful for debounced requests.
 - `onResolve` Callback invoked when Promise resolves.
 - `onReject` Callback invoked when Promise rejects.
 - `onCancel` Callback invoked when a Promise is cancelled.
@@ -400,6 +401,13 @@ Re-runs the `promiseFn` when this callback returns truthy (called on every updat
 
 Initial state for `data` or `error` (if instance of Error); useful for server-side rendering.
 
+#### `skipOnMount`
+
+> `boolean`
+
+Skips the `promiseFn` on mount and runs it only after refresh is requested in one way or another.
+Useful for debounced actions to skip the initial fetch.
+
 #### `onResolve`
 
 > `function(data: any): void`

diff --git a/examples/debounced-search/.env b/examples/debounced-search/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/debounced-search/README.md b/examples/debounced-search/README.md
@@ -0,0 +1,7 @@
+# Debounced search with useAsync hook
+
+This demonstrates how to use the `useAsync` hook to do debounced search.
+
+<a href="https://react-async.ghengeveld.now.sh/examples/debounced-search">
+  <img src="https://img.shields.io/badge/live-demo-blue.svg" alt="live demo">
+</a>
diff --git a/examples/debounced-search/package.json b/examples/debounced-search/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "debounced-search-example",
+  "version": "1.0.0",
+  "private": true,
+  "homepage": "https://react-async.ghengeveld.now.sh/examples/debounced-search-example",
+  "scripts": {
+    "postinstall": "relative-deps",
+    "prestart": "relative-deps",
+    "prebuild": "relative-deps",
+    "pretest": "relative-deps",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "now-build": "SKIP_PREFLIGHT_CHECK=true react-scripts build"
+  },
+  "dependencies": {
+    "debounce": "^1.2.0",
+    "faker": "^4.1.0",
+    "react": "^16.8.6",
+    "react-async": "^7.0.5",
+    "react-async-devtools": "^1.0.3",
+    "react-dom": "^16.8.6",
+    "react-scripts": "^3.0.1"
+  },
+  "devDependencies": {
+    "relative-deps": "^0.1.2"
+  },
+  "relativeDependencies": {
+    "react-async": "../../packages/react-async/pkg",
+    "react-async-devtools": "../../packages/react-async-devtools/pkg"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/examples/debounced-search/public/favicon.ico b/examples/debounced-search/public/favicon.ico
diff --git a/examples/debounced-search/public/index.html b/examples/debounced-search/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/debounced-search/src/index.css b/examples/debounced-search/src/index.css
@@ -0,0 +1,6 @@
+body {
+  margin: 20px;
+  padding: 0px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/examples/debounced-search/src/index.js b/examples/debounced-search/src/index.js
@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useMemo } from "react"
+import { useAsync } from "react-async"
+import ReactDOM from "react-dom"
+import faker from "faker"
+import debounce from "debounce"
+import DevTools from "react-async-devtools"
+
+import "./index.css"
+
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+async function loadSearchResults() {
+  await sleep(500)
+
+  const result = []
+
+  for (let i = 0; i < 10; i++) {
+    result.push(faker.name.findName())
+  }
+
+  return result
+}
+
+function SearchResults({ searchTerm }) {
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm)
+  const results = useAsync({
+    promiseFn: loadSearchResults,
+    watch: debouncedSearchTerm,
+    skipOnMount: true,
+  })
+
+  const debouncedUpdate = useMemo(
+    () =>
+      debounce(nextSearchTerm => {
+        setDebouncedSearchTerm(nextSearchTerm)
+      }, 300),
+    []
+  )
+
+  useEffect(() => {
+    debouncedUpdate(searchTerm)
+    return () => debouncedUpdate.clear()
+  }, [searchTerm, debouncedUpdate])
+
+  if (results.isPending || !results.data) return <p>Loading...</p>
+
+  return (
+    <ul>
+      {results.data.map(result => (
+        <li key={result}>{result}</li>
+      ))}
+    </ul>
+  )
+}
+
+function Search() {
+  const [searchTerm, setSearchTerm] = useState("")
+
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Search"
+        value={searchTerm}
+        onChange={e => setSearchTerm(e.target.value)}
+      />
+      {searchTerm.length > 0 ? <SearchResults searchTerm={searchTerm} /> : <p>Main view</p>}
+    </>
+  )
+}
+
+export const App = () => (
+  <>
+    <DevTools />
+    <Search />
+  </>
+)
+
+if (process.env.NODE_ENV !== "test") ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/examples/debounced-search/src/index.test.js b/examples/debounced-search/src/index.test.js
@@ -0,0 +1,9 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import { App } from "./"
+
+it("renders without crashing", () => {
+  const div = document.createElement("div")
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
diff --git a/packages/react-async/src/Async.js b/packages/react-async/src/Async.js
@@ -28,13 +28,17 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       const promise = props.promise
       const promiseFn = props.promiseFn || defaultProps.promiseFn
       const initialValue = props.initialValue || defaultProps.initialValue
+      let skipOnMount = false
+
+      if (defaultProps.skipOnMount !== undefined) skipOnMount = defaultProps.skipOnMount
+      if (props.skipOnMount !== undefined) skipOnMount = props.skipOnMount
 
       this.mounted = false
       this.counter = 0
       this.args = []
       this.abortController = { abort: () => {} }
       this.state = {
-        ...init({ initialValue, promise, promiseFn }),
+        ...init({ initialValue, skipOnMount, promise, promiseFn }),
         cancel: this.cancel,
         run: this.run,
         reload: () => {
@@ -60,7 +64,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
 
     componentDidMount() {
       this.mounted = true
-      if (this.props.promise || !this.state.initialValue) {
+      if (this.props.promise || (!this.state.skipOnMount && !this.state.initialValue)) {
         this.load()
       }
     }

diff --git a/packages/react-async/src/Async.spec.js b/packages/react-async/src/Async.spec.js
@@ -53,6 +53,46 @@ describe("Async", () => {
     )
     expect(one).toBe(two)
   })
+
+  test("skips the initial fetch on mount and fetches only after fetch is re-requested", async () => {
+    const promiseFn = () => resolveTo("data")
+    const { rerender, getByText, queryByText } = render(
+      <Async initialValue="initial" promiseFn={promiseFn} watch="1" skipOnMount>
+        <Async.Initial>{({ initialValue }) => <div>{initialValue}</div>}</Async.Initial>
+        <Async.Fulfilled>{value => <div>{value}</div>}</Async.Fulfilled>
+      </Async>
+    )
+
+    expect(queryByText("initial")).toBeInTheDocument()
+    expect(queryByText("data")).toBeNull()
+
+    rerender(
+      <Async initialValue="initial" promiseFn={promiseFn} watch="2" skipOnMount>
+        <Async.Initial>{({ initialValue }) => <div>{initialValue}</div>}</Async.Initial>
+        <Async.Fulfilled>{value => <div>{value}</div>}</Async.Fulfilled>
+      </Async>
+    )
+
+    await waitForElement(() => getByText("data"))
+
+    expect(queryByText("initial")).toBeNull()
+    expect(queryByText("data")).toBeInTheDocument()
+  })
+
+  test("does not skip the initial fetch if promise is given", async () => {
+    const promise = resolveTo("data")
+    const { getByText, queryByText } = render(
+      <Async initialValue="initial" promise={promise} skipOnMount>
+        <Async.Initial>{({ initialValue }) => <div>{initialValue}</div>}</Async.Initial>
+        <Async.Fulfilled>{value => <div>{value}</div>}</Async.Fulfilled>
+      </Async>
+    )
+
+    await waitForElement(() => getByText("data"))
+
+    expect(queryByText("initial")).toBeNull()
+    expect(queryByText("data")).toBeInTheDocument()
+  })
 })
 
 describe("Async.Fulfilled", () => {

diff --git a/packages/react-async/src/index.d.ts b/packages/react-async/src/index.d.ts
@@ -21,6 +21,7 @@ export interface AsyncOptions<T> {
   watch?: any
   watchFn?: (props: object, prevProps: object) => any
   initialValue?: T
+  skipOnMount?: boolean
   onResolve?: (data: T) => void
   onReject?: (error: Error) => void
   reducer?: (

diff --git a/packages/react-async/src/propTypes.js b/packages/react-async/src/propTypes.js
@@ -38,6 +38,7 @@ export default PropTypes && {
     watch: PropTypes.any,
     watchFn: PropTypes.func,
     initialValue: PropTypes.any,
+    skipOnMount: PropTypes.bool,
     onResolve: PropTypes.func,
     onReject: PropTypes.func,
     reducer: PropTypes.func,

diff --git a/packages/react-async/src/reducer.js b/packages/react-async/src/reducer.js
@@ -7,14 +7,15 @@ export const actionTypes = {
   reject: "reject",
 }
 
-export const init = ({ initialValue, promise, promiseFn }) => ({
+export const init = ({ initialValue, skipOnMount, promise, promiseFn }) => ({
   initialValue,
+  skipOnMount,
   data: initialValue instanceof Error ? undefined : initialValue,
   error: initialValue instanceof Error ? initialValue : undefined,
   value: initialValue,
   startedAt: promise || promiseFn ? new Date() : undefined,
   finishedAt: initialValue ? new Date() : undefined,
-  ...getStatusProps(getInitialStatus(initialValue, promise || promiseFn)),
+  ...getStatusProps(getInitialStatus(initialValue, skipOnMount, promise || promiseFn)),
   counter: 0,
 })
 

diff --git a/packages/react-async/src/status.js b/packages/react-async/src/status.js
@@ -5,10 +5,11 @@ export const statusTypes = {
   rejected: "rejected",
 }
 
-export const getInitialStatus = (value, promise) => {
-  if (value instanceof Error) return statusTypes.rejected
-  if (value !== undefined) return statusTypes.fulfilled
-  if (promise) return statusTypes.pending
+export const getInitialStatus = (initialValue, skipOnMount, promise) => {
+  if (initialValue instanceof Error) return statusTypes.rejected
+  if (initialValue !== undefined && !skipOnMount) return statusTypes.fulfilled
+  if (promise instanceof Promise) return statusTypes.pending
+  if (typeof promise === "function" && !skipOnMount) return statusTypes.pending
   return statusTypes.initial
 }
 

diff --git a/packages/react-async/src/status.spec.js b/packages/react-async/src/status.spec.js
@@ -6,16 +6,24 @@ import { getInitialStatus, getIdleStatus, statusTypes } from "./status"
 
 describe("getInitialStatus", () => {
   test("returns 'initial' when given an undefined value", () => {
-    expect(getInitialStatus(undefined)).toEqual(statusTypes.initial)
+    expect(getInitialStatus(undefined, false, undefined)).toEqual(statusTypes.initial)
+  })
+  test("returns 'initial' when requested to skip on mount", () => {
+    expect(getInitialStatus("initial", true, () => Promise.resolve("foo"))).toEqual(
+      statusTypes.initial
+    )
+  })
+  test("returns 'pending' when requested to skip on mount but given a promise", () => {
+    expect(getInitialStatus("initial", true, Promise.resolve("foo"))).toEqual(statusTypes.pending)
   })
   test("returns 'pending' when given only a promise", () => {
-    expect(getInitialStatus(undefined, Promise.resolve("foo"))).toEqual(statusTypes.pending)
+    expect(getInitialStatus(undefined, false, Promise.resolve("foo"))).toEqual(statusTypes.pending)
   })
   test("returns 'rejected' when given an Error value", () => {
     expect(getInitialStatus(new Error("oops"))).toEqual(statusTypes.rejected)
   })
   test("returns 'fulfilled' when given any other value", () => {
-    expect(getInitialStatus(null)).toEqual(statusTypes.fulfilled)
+    expect(getInitialStatus(null, false)).toEqual(statusTypes.fulfilled)
   })
 })
 

diff --git a/packages/react-async/src/useAsync.js b/packages/react-async/src/useAsync.js
@@ -62,16 +62,15 @@ const useAsync = (arg1, arg2) => {
     })
   }
 
-  const { promise, promiseFn, initialValue } = options
+  const { promise, promiseFn } = options
   const load = () => {
     if (promise) {
       return start(() => promise).then(
         handleResolve(counter.current),
         handleReject(counter.current)
       )
     }
-    const isPreInitialized = initialValue && counter.current === 0
-    if (promiseFn && !isPreInitialized) {
+    if (promiseFn) {
       return start(() => promiseFn(options, abortController.current)).then(
         handleResolve(counter.current),
         handleReject(counter.current)
@@ -97,13 +96,21 @@ const useAsync = (arg1, arg2) => {
     isMounted.current && dispatch({ type: actionTypes.cancel, meta: getMeta() })
   }
 
-  const { watch, watchFn } = options
+  const { watch, watchFn, initialValue, skipOnMount = false } = options
   useEffect(() => {
     if (watchFn && prevOptions.current && watchFn(options, prevOptions.current)) load()
   })
   useEffect(() => {
     if (counter.current) cancel()
-    if (promise || promiseFn) load()
+    if (promise) load()
+    // promiseFn is given AND is not onMount with initialValue AND is not onMount with skipOnMount
+    // => use promiseFn on mount if not initialValue or skipOnMount AND if not on mount, always use promiseFn
+    else if (
+      promiseFn &&
+      !(initialValue && !prevOptions.current) &&
+      !(skipOnMount && !prevOptions.current)
+    )
+      load()
   }, [promise, promiseFn, watch])
   useEffect(() => () => (isMounted.current = false), [])
   useEffect(() => () => cancel(), [])