diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json index 3a21dd48c..1c4459b8b 100644 --- a/snippet_data/snippetList.json +++ b/snippet_data/snippetList.json @@ -496,6 +496,23 @@ "hash": "11581e3b40209c7152833aa421c7d18c889b16067c5cc1557b1bb7f604f18982" } }, + { + "id": "useAsync", + "type": "snippetListing", + "title": "useAsync", + "attributes": { + "text": "A hook that handles asynchronous calls.\n\n- Create a custom hook that takes a handler function, `fn`.\n- Define a reducer function and an initial state for the custom hook's state.\n- Use the `React.useReducer()` hook to initialize the `state` variable and the `dispatch` function.\n- Define a `run` function that will run the provided callback, `fn`, while using `dispatch` to update `state` as necessary.\n- Return an object containting the the properties of `state` (`value`, `error` and `loading`) and the `run` function.\n\n", + "tags": [ + "hooks", + "state", + "reducer", + "advanced" + ] + }, + "meta": { + "hash": "e15c637ad5256365c049fdef4529955310e2e71fec1d7d76bf9818a2db789b5c" + } + }, { "id": "useClickInside", "type": "snippetListing", diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json index a82bef027..7d20d46a6 100644 --- a/snippet_data/snippets.json +++ b/snippet_data/snippets.json @@ -796,6 +796,33 @@ "authorCount": 2 } }, + { + "id": "useAsync", + "title": "useAsync", + "type": "snippet", + "attributes": { + "fileName": "useAsync.md", + "text": "A hook that handles asynchronous calls.\n\n- Create a custom hook that takes a handler function, `fn`.\n- Define a reducer function and an initial state for the custom hook's state.\n- Use the `React.useReducer()` hook to initialize the `state` variable and the `dispatch` function.\n- Define a `run` function that will run the provided callback, `fn`, while using `dispatch` to update `state` as necessary.\n- Return an object containting the the properties of `state` (`value`, `error` and `loading`) and the `run` function.\n\n", + "codeBlocks": { + "style": "", + "code": "const useAsync = (fn) => {\n const initialState = { loading: false, error: null, value: null };\n const stateReducer = (_, action) => {\n switch (action.type) {\n case 'start':\n return { loading: true, error: null, value: null};\n case 'finish':\n return { loading: false, error: null, value: action.value};\n case 'error':\n return { loading: false, error: action.error, value: null};\n }\n }\n\n const [state, dispatch] = React.useReducer(stateReducer, initialState);\n\n const run = async (args = null) => {\n try {\n dispatch({ type: 'start' });\n const value = await fn(args);\n dispatch({ type: 'finish', value });\n } catch (error) {\n dispatch({ type: 'error', error });\n }\n };\n \n return { ...state, run };\n};", + "example": "const RandomImage = props => {\n const imgFetch = useAsync(url => fetch(url).then(response => response.json())); \n \n return (\n