![\"Preview\"](\"./examples/04_typeahead/screencast.gif\")
\n\n```javascript\nimport React, { useState, useCallback } from 'react';\n\nimport {\n useAsyncCombineSeq,\n useAsyncRun,\n useAsyncTaskDelay,\n useAsyncTaskFetch,\n} from 'react-hooks-async';\n\nconst Err = ({ error }) => Error: {error.name} {error.message}
;\n\nconst Loading = ({ abort }) => Loading...
;\n\nconst GitHubSearch = ({ query }) => {\n const url = `https://api.github.com/search/repositories?q=${query}`;\n const delayTask = useAsyncTaskDelay(useCallback(() => 500, [query]));\n const fetchTask = useAsyncTaskFetch(url);\n const combinedTask = useAsyncCombineSeq(delayTask, fetchTask);\n useAsyncRun(combinedTask);\n if (delayTask.pending) return Waiting...
;\n if (fetchTask.error) return No result
;\n return (\n - \n {fetchTask.result.items.map(({ id, name, html_url }) => (\n
- {name} \n ))}\n
\n Query:\n setQuery(e.target.value)} />\n {query &&
\n );\n};\n```\n\nA simple fetch example:\n\n```javascript\nimport React from 'react';\n\nimport { useFetch } from 'react-hooks-async';\n\nconst UserInfo = ({ id }) => {\n const url = `https://reqres.in/api/users/${id}?delay=1`;\n const { pending, error, result, abort } = useFetch(url);\n if (pending) return Loading...
;\n if (error) return Error: {error.name} {error.message}
;\n if (!result) return No result
;\n return First Name: {result.data.first_name}
;\n};\n\nconst App = () => (\n \n
\n);\n```\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:minimal\n```\n\nand open Loading...
;\n if (error) return Error: {error.name} {error.message}
;\n return Name: {result.name}
;\n};\n\nconst App = () => (\n \n
\n);\n```\n\n### A basic async example (run in callback)\n\n```jsx\nimport React, { useState } from 'react';\n\nimport { useAsyncTask } from 'react-hooks-async';\n\nconst fetchStarwarsHero = async ({ signal }, id) => {\n const response = await fetch(`https://swapi.co/api/people/${id}/`, { signal });\n const data = await response.json();\n return data;\n};\n\nconst StarwarsHero = () => {\n const { start, started, result } = useAsyncTask(fetchStarwarsHero);\n const [id, setId] = useState('');\n return (\n \n setId(e.target.value)} />\n \n {started && 'Fetching...'}\n
\n );\n};\n\nconst App = () => (\n Name: {result && result.name}
\n \n
\n);\n```\n\n### A simple fetch example\n\n```jsx\nimport React from 'react';\n\nimport { useFetch } from 'react-hooks-async';\n\nconst UserInfo = ({ id }) => {\n const url = `https://reqres.in/api/users/${id}?delay=1`;\n const { pending, error, result, abort } = useFetch(url);\n if (pending) return Loading...
;\n if (error) return Error: {error.name} {error.message}
;\n return First Name: {result.data.first_name}
;\n};\n\nconst App = () => (\n \n
\n);\n```\n\n### A typeahead search example using combination\n\n\n\n```jsx\nimport React, { useState, useCallback } from 'react';\n\nimport {\n useAsyncCombineSeq,\n useAsyncRun,\n useAsyncTaskDelay,\n useAsyncTaskFetch,\n} from 'react-hooks-async';\n\nconst Err = ({ error }) => Error: {error.name} {error.message}
;\n\nconst Loading = ({ abort }) => Loading...
;\n\nconst GitHubSearch = ({ query }) => {\n const url = `https://api.github.com/search/repositories?q=${query}`;\n const delayTask = useAsyncTaskDelay(500);\n const fetchTask = useAsyncTaskFetch(url);\n const combinedTask = useAsyncCombineSeq(delayTask, fetchTask);\n useAsyncRun(combinedTask);\n if (delayTask.pending) return Waiting...
;\n if (fetchTask.error) return - \n {fetchTask.result.items.map(({ id, name, html_url }) => (\n
- {name} \n ))}\n
\n Query:\n setQuery(e.target.value)} />\n {query &&
\n );\n};\n```\n\n## Examples\n\nThe [examples](examples) folder contains working examples.\nYou can run one of them with\n\n```bash\nPORT=8080 npm run examples:01_minimal\n```\n\nand open