{"id":7827,"date":"2023-06-01T12:53:30","date_gmt":"2023-06-01T11:53:30","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=7827"},"modified":"2025-04-07T11:03:48","modified_gmt":"2025-04-07T10:03:48","slug":"react-hook-usedata","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-hook-usedata\/","title":{"rendered":"React Hook: useData()"},"content":{"rendered":"\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">export interface IUseDataState&lt;T> {\n    data: T | undefined;\n    trigger: number;\n    revision: number;\n    loading: boolean;\n    loaded: boolean;\n    initialLoading: boolean;\n}\n\nexport function useData&lt;T>(fetchFn: () => Promise&lt;T>, deps: any = []): IData&lt;T> {\n\n    const [state, setState] = useObjectState&lt;IUseDataState&lt;T>>({\n        revision: 0,\n        trigger: 0,\n        loaded: false,\n        loading: true,\n        initialLoading: true,\n        data: undefined\n    });\n\n    useEffectAsync(async () => {\n        if (!state.initialLoading) {\n            setState({ loading: true, loaded: false });\n        }\n        let newState: Partial&lt;IUseDataState&lt;T>> = {};\n        try {\n            const newData = await fetchFn();\n            newState = { data: newData, loaded: true, revision: state.revision + 1 };\n        } catch (e) {\n            console.error(e);\n            newState = { data: undefined, revision: state.revision + 1 };\n        } finally {\n            setState({ ...newState, loading: false, initialLoading: false });\n        }\n    }, [...deps, state.trigger]);\n\n    return {\n        data: state.data,\n        revision: state.revision,\n        loading: state.loading,\n        loaded: state.loaded,\n        initialLoading: state.initialLoading,\n        setData: (data: T) => setState({ data: data, revision: state.revision + 1 }),\n        updateData: () => setState({ trigger: state.trigger + 1 })\n    } as IData&lt;T>;\n}<\/pre><\/div>\n\n\n\n<p>Example component:<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"tsx\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">export function UserInfo(props: { userId: string }): React.ReactElement {\n    const ds = useData(() => appDomain.IUserService.loadUser(props.userId), [props.userId]);\n    const user = ds.data;\n    \n    return &lt;div>\n        Loading: {ds.loading}\n        User name: {user?.name}\n        &lt;button type=\"button\" onClick={ds.updateData}>Refresh&lt;\/button>\n    &lt;\/div>;\n}\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Example component:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7827","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/7827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=7827"}],"version-history":[{"count":3,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/7827\/revisions"}],"predecessor-version":[{"id":9428,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/7827\/revisions\/9428"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=7827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=7827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=7827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}