React19 will introduce a new hook called use()<\/code>. This hook will simplify how we use promises, async code, and context.<\/p>\n\n\n\n

Here is the syntax of hook:<\/p>\n\n\n\n

import<\/strong> { use } from<\/strong> 'react';\n\nfunction<\/strong> MessageComponent({ messagePromise }) {\n    const<\/strong> message = use(messagePromise);\n    \/\/ ...\n}<\/code><\/pre>\n\n\n\n
The good news is that this hook can be used for data fetching. Here’s an example of fetching data when the component mounts and when a button is clicked. Note that the useEffect hook is not used in the code:<\/p>\n\n\n\n
import * as React from 'react';\nimport { useState, use, Suspense } from 'react';\nimport { faker } from '@faker-js\/faker';\n\nexport const App = () => {\n  const [newsPromise, setNewsPromise] = useState(() => fetchNews());\n\n  const handleUpdate = () => {\n    fetchNews().then((news) => {\n      setNewsPromise(Promise.resolve(news));\n    });\n  };\n\n  return (\n    <>\n      <h3>\n        Here is the news <button onClick={handleUpdate}>Refresh<\/button>\n      <\/h3>\n      <NewsContainer newsPromise={newsPromise} \/>\n    <\/>\n  );\n};\n\nlet news = [...new Array(4)].map(() => faker.lorem.sentence());\n\nconst fetchNews = () =>\n  new Promise<string[]>((resolve) =>\n    \/\/ simulate data fetching with a setTimeout\n    setTimeout(() => {\n      \/\/ add one more headline at each refresh\n      news.unshift(faker.lorem.sentence());\n      resolve(news);\n    }, 1000)\n  );\n\nconst NewsContainer = ({ newsPromise }) => (\n  <Suspense fallback={<p>Fetching the news...<\/p>}>\n    <News newsPromise={newsPromise} \/>\n  <\/Suspense>\n);\n\nconst News = ({ newsPromise }) => {\n  const news = use<string[]>(newsPromise);\n  return (\n    <ul>\n      {news.map((title, index) => (\n        <li key={index}>{title}<\/li>\n      ))}\n    <\/ul>\n  );\n};\n<\/code><\/pre>\n\n\n\n
Let’s understand the code:<\/p>\n\n\n\n
\n
fetchNews<\/code>\u00a0is responsible for the GET request.<\/li>\n\n\n\n
We are using the\u00a0use<\/code>\u00a0hook to execute the\u00a0fetchNews<\/code>\u00a0instead of using the\u00a0useEffect<\/code>\u00a0or\u00a0useState<\/code>\u00a0hooks.<\/li>\n\n\n\n
The return of the\u00a0useState<\/code>\u00a0hook is\u00a0news<\/code>\u00a0which will have the response of the GET request.<\/li>\n\n\n\n
In the return block, we are using\u00a0news<\/code>\u00a0to map over it and create the list<\/li>\n<\/ol>\n\n\n\n
Remember this warning in the <Suspense> documentation?<\/p>\n\n\n\n
Data fetching with Suspense support without a self-sufficient framework is not supported. <\/p>\n\n\n\n
But in React 19, this is no longer relevant.<\/p>\n\n\n\n
The use hook has an interesting feature: unlike other React hooks, it can be called inside loops and conditional operators, such as if.<\/p>\n\n\n\n
Does this mean that for data fetching on the client side, it is no longer necessary to use third-party libraries, such as TanStack Query? Well, we still have to figure this out, as TanStack Query does much more than just resolving promises.<\/p>\n\n\n\n
But this is a step in the right direction, significantly simplifying the creation of single-page applications working with REST or GraphQL APIs. I’m excited about this new hook!<\/p>\n","protected":false},"excerpt":{"rendered":"
Understanding the future of React React19 has brought new Hooks to the board to streamline the development process. Here is the breakdown of newly introduced Hooks. The new use() hook React19 will introduce a new hook called use(). This hook will simplify how we use promises, async code, and context. Here is the syntax of hook: The good news is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[3],"tags":[6,5],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-react","tag-hook","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":5,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/olgamatosova.sfdevserver.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}