async-react-hooks
useAsyncCallback
Basic example
;; const doSomethingAsync = { ; }; const Demo = { const callback data error loading refetch = ; return <div> <button disabled=loading onClick=callback>Do Something</button> loading && <div>Loading...</div> error && <div> Error: error <button onClick=refetch>Try again</button> </div> data && <div>data <button onClick=refetch>Refresh</button></div> </div> ;}; ;
Example with dependencies
;; const sayHello = { ; }; const GreetName = { const callback data error loading refetch = ; return <div> <button disabled=loading onClick=callback> Say Hello to name </button> loading && <div>Loading...</div> error && <div> Error: error <button onClick=refetch>Try again</button> </div> data && <div>data <button onClick=refetch>Refresh</button></div> </div> }; const names = 'Jane' 'John' 'Mickey' 'Donald';const getNextName = namesnames + 1 % 4; const Demo = { const name setName = ; return <div> <div> Current Name: name <button onClick= >Change name</button> </div> <GreetName name=name /> </div> ;} ;
useAsyncEffect
Basic example
;; const doSomethingAsync = { ; }; const Demo = { const data error loading refetch = ; if loading return <div>Loading...</div>; if error return <div>Error: error <button onClick=refetch>Retry</button></div>; return <div>Success: data <button onClick=refetch>Refresh</button></div>}; ;
Example with dependencies
;; const sayHello = { ; }; const GreetName = { const data error loading refetch = ; if loading return <div>Loading...</div>; if error return <div>Error: error <button onClick=refetch>Retry</button></div>; return <div>data <button onClick=refetch>Refresh</button></div>}; const names = 'Jane' 'John' 'Mickey' 'Donald';const getNextName = namesnames + 1 % 4; const Demo = { const name setName = ; return <div> <div> Current Name: name <button onClick= >Change name</button> </div> <GreetName name=name /> </div> ;} ;
Todo
- add error reporting example