2505 lines
472 KiB
HTML
2505 lines
472 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
<meta name="theme-color" content="#823EB7" />
|
|
<meta data-react-helmet="true" name="monetization" content="$ilp.uphold.com/xBpREnjPwD4j" />
|
|
<meta data-react-helmet="true" name="twitter:domain" content="rwieruch" />
|
|
<meta data-react-helmet="true" name="twitter:site" content="@rwieruch" />
|
|
<meta data-react-helmet="true" name="twitter:creator" content="@rwieruch" />
|
|
<meta data-react-helmet="true" name="twitter:image:src" content="https://www.robinwieruch.de/static/9b13b3546c675d6f1a1e565f5185cab6/9842e/banner.jpg" />
|
|
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image" />
|
|
<meta data-react-helmet="true" name="twitter:description" content="A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API ..." />
|
|
<meta data-react-helmet="true" name="twitter:title" content="How to fetch data with React Hooks" />
|
|
<meta data-react-helmet="true" property="og:image" content="https://www.robinwieruch.de/static/9b13b3546c675d6f1a1e565f5185cab6/9842e/banner.jpg" />
|
|
<meta data-react-helmet="true" property="og:url" content="https://www.robinwieruch.de/react-hooks-fetch-data/" />
|
|
<meta data-react-helmet="true" property="og:type" content="website" />
|
|
<meta data-react-helmet="true" property="og:description" content="A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API ..." />
|
|
<meta data-react-helmet="true" property="og:title" content="How to fetch data with React Hooks" />
|
|
<meta data-react-helmet="true" name="news_keywords" content="react fetch data hooks" />
|
|
<meta data-react-helmet="true" name="keywords" content="react fetch data hooks" />
|
|
<meta data-react-helmet="true" name="description" content="A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API ..." />
|
|
<meta data-react-helmet="true" name="author" content="Robin Wieruch" />
|
|
<meta name="generator" content="Gatsby 4.14.1" />
|
|
<style data-href="/styles.6af106f387a9bb137716.css" data-identity="gatsby-global-css">
|
|
<![CDATA[
|
|
.Button-module--base--1Ilc7{background-color:#fff;border:1px solid #823eb7;border-radius:0;color:#823eb7;cursor:pointer;font-size:13px;letter-spacing:.08em;line-height:1.42857143;margin-bottom:0;padding:6px 12px;text-align:center;text-decoration:none!important;text-transform:uppercase;transition:all .2s ease;vertical-align:middle;white-space:nowrap}.Button-module--base--1Ilc7:disabled{border-color:#e4e4e4;color:#e4e4e4;cursor:inherit}.Button-module--base--1Ilc7 path,.Button-module--base--1Ilc7 svg{fill:#823eb7;stroke:#823eb7}.Button-module--base--1Ilc7:visited{color:#823eb7}.Button-module--base--1Ilc7:visited path,.Button-module--base--1Ilc7:visited svg{fill:#823eb7;stroke:#823eb7}.Button-module--base--1Ilc7:hover:enabled{background-color:#823eb7;border-color:#823eb7;color:#fff}.Button-module--base--1Ilc7:hover:enabled path,.Button-module--base--1Ilc7:hover:enabled svg{fill:#fff;stroke:#fff}.Button-module--base__selected--Zvlns{background-color:#823eb7;border-color:#823eb7;color:#fff}.Button-module--base__selected--Zvlns path,.Button-module--base__selected--Zvlns svg{fill:#fff;stroke:#fff}.Button-module--base__selected--Zvlns:visited{color:#fff}.Button-module--base__large--fUAjB{padding:20px}.Button-module--base__round--vSjN6{border-radius:5px}.Navigation-module--nav--aexc7{background-color:#fff;box-shadow:0 5px 20px -10px #000;overflow:hidden;position:fixed;top:0;width:100%;z-index:10}.Navigation-module--nav__landing--A2vxq{background-color:transparent;box-shadow:none}.Navigation-module--navbar--0Czx7{align-items:center;display:flex;justify-content:space-between;min-height:40px;padding:10px 15px 10px 50px}@media(max-width:460px){.Navigation-module--navbar--0Czx7{padding-left:15px}}.Navigation-module--logo-as-a-link--f3lah{align-items:center;display:flex;justify-content:center}.Navigation-module--logo-as-a-link__landing--xnA8X{opacity:0}.Navigation-module--link-list--o6mVI{display:flex;margin:0}@media(max-width:460px){.Navigation-module--link-list--o6mVI{display:none}.Navigation-module--link-list__open--nTtMS{display:block}}.Navigation-module--link-item--gsN1G{margin:0 10px}@media(max-width:460px){.Navigation-module--link-item--gsN1G{margin-bottom:20px;margin-top:12px}}.Navigation-module--link--gIgrN{color:#333;font-weight:200;letter-spacing:3.5px;text-transform:uppercase}.Navigation-module--link--gIgrN:visited{color:#333}.Navigation-module--link--gIgrN:hover{color:#823eb7}.Navigation-module--link__landing--gdDx9,.Navigation-module--link__landing--gdDx9:visited{color:#fff}.Navigation-module--link__landing--gdDx9:hover{color:#823eb7}.Navigation-module--mobile-toggle--FHOTm{align-self:flex-start;display:none}@media(max-width:460px){.Navigation-module--mobile-toggle--FHOTm{display:block}}.ShareButtons-module--share-button-list--2aikG{left:0;margin:0;position:fixed;top:40%;width:50px;z-index:999}@media(max-width:460px){.ShareButtons-module--share-button-list--2aikG{display:none}}.ShareButtons-module--share-button-item--XPSPA{align-items:center;display:flex;justify-content:center;margin:20px 0}.HoverLink-module--hover-link--BtPN5{position:static}.HoverLink-module--hover-link--BtPN5,.HoverLink-module--hover-link--BtPN5:hover,.HoverLink-module--hover-link--BtPN5:visited{color:#333}.HoverLink-module--hover-link--BtPN5:before{background-color:transparent;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.Blog-module--blog-container--DjYg-:not(:first-child){margin-top:60px}.Blog-module--blog-list--mR1qe{display:flex;flex-direction:column}.Blog-module--blog-list__column--1qQRZ{flex-direction:row}@media(max-width:720px){.Blog-module--blog-list__column--1qQRZ{flex-direction:column}}.Blog-module--blog-item-container--k6FtN{border-bottom:1px solid #e4e4e4;display:flex;position:relative}@media(max-width:720px){.Blog-module--blog-item-container--k6FtN{flex-direction:column}}.Blog-module--blog-item-container--k6FtN:hover{border-bottom:1px solid transparent;box-shadow:0 3px 15px rgba(0,0,0,.2)}.Blog-module--blog-item-container--k6FtN a:hover{text-decoration:none}.Blog-module--blog-item-container__featured--8AezN{border-bottom:1px solid transparent;margin:20px 0}@media(max-width:720px){.Blog-module--blog-item-container__featured--8AezN{border-bottom:1px solid #e4e4e4}}@media(max-width:900px){.Blog-module--blog-item-container__featured--8AezN{flex-direction:column}}.Blog-module--blog-item-container__column--NdyD7{border-bottom:1px solid transparent;flex-direction:column;margin:20px}@media(max-width:460px){.Blog-module--blog-item-container__column--NdyD7{margin:10px 0}}.Blog-module--blog-item-image--\+FjXT{height:180px;margin:20px;-o-object-fit:cover;object-fit:cover;width:280px}@media(max-width:720px){.Blog-module--blog-item-image--\+FjXT{display:none}}.Blog-module--blog-item-image__featured--4vnWu{height:333px;width:500px}.Blog-module--blog-item-image__column--IEF8v{height:200px;margin:0;width:100%}.Blog-module--blog-item-content--2UJPQ{flex:1 1;margin:20px}.Blog-module--blog-item-content__featured--VYU\+7{display:flex;flex-direction:column}.Blog-module--nav--14cSi{display:flex;justify-content:space-between;margin:20px}.KeepReading-module--container--F3ycW{display:flex;flex-direction:column;margin:0 auto;max-width:700px;padding:20px 50px}.withBorder-module--top-border--wgBtX{border-top:1px solid #e4e4e4}.Lead-module--lead--nY1ek{font-size:21px;font-weight:300;margin:10px 0}.Lead-module--lead--nY1ek svg{margin-right:10px}.PrimaryButton-module--primary-button--XZdn-{background-color:#823eb7;color:#fff;display:inline-block;margin:0}.PrimaryButton-module--primary-button--XZdn- path,.PrimaryButton-module--primary-button--XZdn- svg{fill:#fff;stroke:#fff}.PrimaryButton-module--primary-button--XZdn-:visited{background-color:#823eb7;color:#fff}.PrimaryButton-module--primary-button--XZdn-:visited path,.PrimaryButton-module--primary-button--XZdn-:visited svg{fill:#fff;stroke:#fff}.PrimaryButton-module--primary-button--XZdn-:disabled{background-color:transparent}.PrimaryButton-module--primary-button--XZdn-:hover{background-color:transparent;color:#823eb7}.PrimaryButton-module--primary-button--XZdn-:hover path,.PrimaryButton-module--primary-button--XZdn-:hover svg{fill:#823eb7;stroke:#823eb7}.fonts-module--primary-header--Wqo-F{font-size:48px;font-weight:300;letter-spacing:5.5px;line-height:1.2;margin:0;padding:0 0 10px;text-transform:uppercase}@media(max-width:720px){.fonts-module--primary-header--Wqo-F{font-size:36px}}@media(max-width:460px){.fonts-module--primary-header--Wqo-F{font-size:28px}}.fonts-module--secondary-header--8cg9d{font-size:26px;font-weight:300;letter-spacing:1px;line-height:1.2;margin:0;padding:0 0 10px;text-transform:uppercase}.fonts-module--secondary-header-muted--lkK2p{font-size:12px;font-weight:500;letter-spacing:3.5px;line-height:1.5;margin:0;opacity:.7;padding:0 0 10px;text-transform:uppercase}.index-module--section-header--N19-S{padding-bottom:40px}.index-module--label--gZdX-{align-items:center;display:flex;flex-direction:column;margin:0 auto;max-width:700px;padding:85px 20px;text-align:center}.index-module--cta--svVwg{display:flex;margin:10px}.index-module--input--A3geb{margin:0 -1px 0 0;max-width:250px;min-width:100px}.index-module--container--qqW\+Y{align-items:center;display:flex;margin:0 auto;max-width:700px;padding:85px 20px;text-align:center}@media(max-width:720px){.index-module--container--qqW\+Y{flex-direction:column}}.index-module--information--2wFMl{display:flex;flex-direction:column}.index-module--information--2wFMl button path,.index-module--information--2wFMl button svg{fill:#fff;stroke:#fff}.index-module--image--VeUTI{margin:20px;max-width:300px;min-width:250px}.index-module--container--Evuo1{display:flex;justify-content:flex-end;padding:85px 20px}@media(max-width:460px){.index-module--container--Evuo1{align-items:flex-start;flex-direction:column;padding:85px 10px}}.index-module--subfooter-label--PZVFY{font-weight:700;text-transform:uppercase}.index-module--subfooter-links--WVwtv{margin:0 40px;max-width:350px;min-width:150px}.index-module--subfooter-links--WVwtv:last-child{margin-right:0}@media(max-width:460px){.index-module--subfooter-links--WVwtv:not(:last-child){margin-bottom:20px}}.index-module--footer-link--F2nJ6{margin:10px 0}.index-module--container--gInUu{align-items:center;display:flex;justify-content:space-between;padding:10px 20px}@media(max-width:720px){.index-module--container--gInUu{flex-direction:column}}.index-module--social-icons--LkEsl{display:flex;margin:10px}.index-module--social-icon--fGcO0{margin:0 10px}.index-module--footer-links--x2kmN{display:flex}.index-module--footer-link--VNu\+7{margin:0 10px}.Title-module--title--DszB6{border-top:1px solid #e4e4e4;font-size:26px;font-weight:400;margin-bottom:20px;margin-top:40px;padding-bottom:20px;padding-top:40px;text-align:center}.Subtitle-module--subtitle--d4R\+F{border-top:1px solid #e4e4e4;font-size:22px;font-weight:400;line-height:1.1;margin-bottom:10px;margin-top:20px;padding-bottom:10px;padding-top:20px;text-align:left}.Divider-module--divider--EN8bi{border:0;display:block;overflow:visible;text-align:center}.Divider-module--divider--EN8bi:before{content:"...";display:inline-block;letter-spacing:.6em;margin-left:.6em;position:relative}.List-module--list--vZF9g{margin-left:10px;padding-left:10px}.List-module--list--vZF9g li p{margin:0}.OrderedList-module--list--AHkVa{margin-left:10px;padding-left:10px}.OrderedList-module--list--AHkVa li p{margin:0}.Item-module--item--S5Nyf{list-style-type:square}.LinkCollection-module--container--0QRqX{border:1px solid #e4e4e4;border-radius:5px;margin:16px 0;padding:10px}.LinkCollection-module--container--0QRqX p{margin-top:0}.LinkCollection-module--container--0QRqX ul{margin:0}.ReadMore-module--container--zcHJ2{border:1px solid #e4e4e4;border-radius:5px;margin:16px 0;padding:10px}.ReadMore-module--container--zcHJ2 p{margin-top:0}.Box-module--box--kNKww{padding:20px}.Box-module--box__center--0bDUa{align-items:center;display:flex;flex-direction:column;justify-content:center}.Box-module--box__border--Y023J{border:1px solid #e4e4e4;border-radius:4px}.Box-module--box__attached--7as9c{border:1px solid #011627;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-left:4px solid #823eb7;border-top:none;margin-top:calc(-1em - 3px);padding-top:23px}body,html{color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:18px;font-weight:400;letter-spacing:-.003em;line-height:1.58;margin:0;padding:0}button,input,textarea{font-size:16px}h1{font-size:30px;font-weight:400;margin-top:20px;text-align:center}h1,h2{margin-bottom:10px}h2{font-size:22px;font-weight:300;letter-spacing:.08em;line-height:1.1;margin-top:0;text-transform:uppercase}h3{font-size:18px;font-weight:600;margin-bottom:10px;margin-top:5px}h4{font-size:20px;font-weight:500;margin:0 0 10px}small{font-size:14px}input,small{color:#545454}input{-webkit-appearance:none;background-color:#fff;border:1px solid #e4e4e4;border-radius:0;box-sizing:border-box;display:inline-block;padding:8px}input:focus{border-color:#823eb7;border-width:1px;outline:none}ol,ul{list-style:none;margin:20px 0;padding:0}li>ul{margin:0 20px}ul ul{margin-bottom:0;margin-top:0}li{list-style:none;margin:0;padding:0}a{color:#823eb7;text-decoration:none}a path,a svg{fill:#333;stroke:#333}a:visited{color:#823eb7}a:visited path,a:visited svg{fill:#333;stroke:#333}a.primary,a:hover.primary,a:visited.primary{color:#823eb7}a.primary path,a.primary svg,a:hover.primary path,a:hover.primary svg,a:visited.primary path,a:visited.primary svg{fill:#823eb7;stroke:#823eb7}a:hover{text-decoration:underline;transition:all .2s ease-out}a:hover path,a:hover svg{fill:#823eb7;stroke:#823eb7;transition:all .2s ease-out}pre:not(.prism-code){background-color:#2f1e2e!important;border-left:4px solid #823eb7;border-radius:4px}code{white-space:pre-wrap!important}.token-line{line-height:1.15!important}.highlight-line{background-color:#4f424c;display:block;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}.Layout-module--container--uKGcW{display:flex;flex-direction:column;position:relative;width:100%}.Layout-module--content--DgRZy{display:flex;justify-content:center}._404-module--container--tVehg{margin:20% 0}.Whitespace-module--whitespace--HPMtg{min-height:100vh;width:100%}.index-module--container--2GuoF{width:100%}.blog-module--container--sUZ3k,.category-module--container--jxV5Q{align-self:center;display:flex;flex-direction:column;margin:50px;max-width:960px}.DividerButton-module--divider--DZu6q{border-bottom:1px solid #e4e4e4;display:flex;justify-content:flex-end;margin:40px 0;position:relative;width:100%}.DividerButton-module--divider--DZu6q a{background-color:#fff;padding-right:20px}.DividerButton-module--divider--DZu6q a:first-child{padding-left:20px}.DividerButton-module--absolute--\+68cL{position:absolute;top:-13px}.FollowButtons-module--follow-button-list--ueM31{align-items:center;display:flex;justify-content:center;margin-bottom:20px}.FollowButtons-module--follow-button-item--0lXU5{margin:0 5px}.FollowButtons-module--follow-button-item--0lXU5 path,.FollowButtons-module--follow-button-item--0lXU5 svg{stroke:#fff;fill:#fff}.FollowButtons-module--instagram-follow--eKZpw{align-items:center;background-color:#fff;border:1px solid #e4e4e4;border-radius:3px;color:#000;display:flex;font-size:12px;margin-top:-8px;padding:0 6px}.FollowButtons-module--instagram-follow--eKZpw path,.FollowButtons-module--instagram-follow--eKZpw svg{fill:#000;stroke:#000}.FollowButtons-module--instagram-follow--eKZpw:active,.FollowButtons-module--instagram-follow--eKZpw:hover,.FollowButtons-module--instagram-follow--eKZpw:visited{background-color:#fff;color:#000;text-decoration:none}.FollowButtons-module--instagram-follow--eKZpw:active path,.FollowButtons-module--instagram-follow--eKZpw:active svg,.FollowButtons-module--instagram-follow--eKZpw:hover path,.FollowButtons-module--instagram-follow--eKZpw:hover svg,.FollowButtons-module--instagram-follow--eKZpw:visited path,.FollowButtons-module--instagram-follow--eKZpw:visited svg{fill:#000;stroke:#000}.FollowButtons-module--facebook-follow--MetDt{align-items:center;background-color:#3b5998;border:1px solid #3b5998;border-radius:3px;color:#fff;display:flex;font-size:12px;margin-top:-8px;padding:0 6px}.FollowButtons-module--facebook-follow--MetDt path,.FollowButtons-module--facebook-follow--MetDt svg{fill:#fff;stroke:#fff}.FollowButtons-module--facebook-follow--MetDt:active,.FollowButtons-module--facebook-follow--MetDt:hover,.FollowButtons-module--facebook-follow--MetDt:visited{background-color:#3b5998;color:#fff;text-decoration:none}.FollowButtons-module--facebook-follow--MetDt:active path,.FollowButtons-module--facebook-follow--MetDt:active svg,.FollowButtons-module--facebook-follow--MetDt:hover path,.FollowButtons-module--facebook-follow--MetDt:hover svg,.FollowButtons-module--facebook-follow--MetDt:visited path,.FollowButtons-module--facebook-follow--MetDt:visited svg{fill:#fff;stroke:#fff}.post-module--container--e01vr{display:flex;flex-direction:column;justify-content:center;max-width:700px;padding:0 50px}@media(max-width:460px){.post-module--container--e01vr{padding:0 20px}}.post-module--header--PvAqW{padding-bottom:20px;padding-top:40px;width:100%}.post-module--subheader--Rd029{align-items:center;color:#545454;display:flex;flex-direction:column;justify-content:center;margin-bottom:10px;text-align:center;text-transform:uppercase;white-space:nowrap}.post-module--subheaderPrimary--rtp98{display:flex}@media(max-width:460px){.post-module--subheaderPrimary--rtp98{flex-direction:column}}.Image-module--container--eSTFv{display:block;width:100%}.index-module--container--k1oDk{align-items:center;display:flex;flex-direction:column;padding:85px 20px;text-align:center}@media(max-width:460px){.index-module--container--k1oDk{padding:85px 10px}}.index-module--container--k1oDk:nth-child(odd){background:#fff}.index-module--container--k1oDk:nth-child(2n){background:#f7f7f7}.index-module--container--k1oDk:not(:last-child){border-bottom:1px solid #e4e4e4}.index-module--social-icons--8Uj3m{display:flex;flex-wrap:wrap;justify-content:center}.index-module--social-icon--nQknI{margin:0 10px}.index-module--text--WErYq{margin:0 20px;max-width:700px}.index-module--image--8Kd-g{height:auto;max-width:120px;padding:20px;width:100%}.index-module--image--8Kd-g img{border-radius:50%}.index-module--container--sQL32{border-bottom:1px solid #e4e4e4;display:flex;flex-direction:column;min-height:100vh;width:100%}.index-module--header--m9Dga{align-items:center;display:flex;flex:1 1;justify-content:center;padding:20px}@media(max-width:720px){.index-module--header--m9Dga{flex-direction:column}}.index-module--image--3hb-w{height:auto;max-width:512px;padding:20px;width:100%}.index-module--content--5sev2{max-width:380px;padding:20px;text-align:center}@media(max-width:720px){.index-module--content--5sev2{max-width:500px}}.index-module--features--cfjEq{display:flex;flex-wrap:wrap;justify-content:center;padding:20px}.index-module--feature--oyKvV{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:20px 60px}.index-module--list--W7IMo{width:80%}.index-module--item--GkrKz{border-top:1px solid #e4e4e4;padding:10px;text-align:left}.index-module--container--3s8u9{position:relative}.index-module--caption--OnbC-{align-items:center;display:flex;flex-direction:column;left:0;position:absolute;text-align:center;top:45%;width:100%}.index-module--caption--OnbC- h1,.index-module--caption--OnbC- h2{color:#fff}.index-module--background-dimmer--DudFe{background-color:#000;bottom:0;content:"";left:0;opacity:.5;position:absolute;right:0;top:0}.index-module--background-image--GddaN{height:100vh;left:0;position:absolute;top:0;width:100%;z-index:-1}.index-module--background-image--GddaN>img{font-family:"object-fit: cover !important; object-position: 0% 0% !important;";-o-object-fit:cover!important;object-fit:cover!important;-o-object-position:50% 0!important;object-position:50% 0!important}.index-module--items--Uv\+sg{margin-bottom:50px;margin-top:75px;width:100%}.index-module--portfolio-items--wlJC8{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:50px;margin-top:75px}.index-module--portfolio-item--oI8OY{align-items:center;background-color:#fff;box-shadow:0 3px 15px rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:center;margin:10px 20px;max-width:350px}.index-module--portfolio-item--oI8OY a,.index-module--portfolio-item--oI8OY a:hover,.index-module--portfolio-item--oI8OY a:visited{color:#333}.index-module--portfolio-item--oI8OY h4,.index-module--portfolio-item--oI8OY p{margin:0}@media(max-width:460px){.index-module--portfolio-item--oI8OY{margin:10px 0}}.index-module--caption--w28W4{padding:20px}.index-module--muted--h6sSQ{color:#545454;padding-bottom:10px}.index-module--image--9G3aK{width:300px}.index-module--text--VeagS{max-width:740px}.index-module--item--QrUTx{display:flex;padding:80px 0;width:80%}@media(max-width:900px){.index-module--item--QrUTx{flex-direction:column}}.index-module--item--QrUTx:not(:last-child){border-bottom:1px solid #e4e4e4}.index-module--image--TxuLB{height:auto;margin-right:40px;max-width:512px;min-width:340px}.index-module--image--TxuLB img{height:100%;width:100%}@media(max-width:900px){.index-module--image--TxuLB{margin-right:0}}@media(max-width:460px){.index-module--image--TxuLB{min-width:120px}}.index-module--content--e8Wxu{min-width:320px;text-align:left}@media(max-width:460px){.index-module--content--e8Wxu{min-width:120px}}.index-module--benefit--1PYyN{align-items:center;display:flex;padding-bottom:10px}.index-module--benefit--1PYyN:last-child{padding-bottom:0}.index-module--services-items--Zsr8X{display:flex;flex-wrap:wrap;justify-content:center}.index-module--services-item--3TnVf{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0 20px 60px;max-width:350px}.index-module--services-item--3TnVf path,.index-module--services-item--3TnVf svg{fill:#823eb7;stroke:#823eb7}.index-module--cites--Ih5HW{width:80%}.index-module--cite--fq8qa{text-align:left}.index-module--tweets--5F6r1{display:flex;flex-wrap:wrap;justify-content:center}.index-module--tweet--Dynj1{padding:10px;width:275px}.index-module--chapters--uNjzc{align-items:flex-start;display:flex;flex-direction:column;width:80%}.index-module--chapter--wxvyD{padding:20px;text-align:left}.index-module--chapter--wxvyD li,.index-module--chapter--wxvyD ul{list-style-type:circle}.index-module--headline--t4P3f{align-items:center;display:flex}.index-module--testimonial-items--cL4DM{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:50px;margin-top:75px}.index-module--testimonial-item--m8JvJ{align-items:center;display:flex;flex-direction:column;margin:10px 20px;max-width:350px}.index-module--testimonial-item--m8JvJ h4,.index-module--testimonial-item--m8JvJ p{margin:0}.index-module--image--mLdvE{height:160px;width:160px}.index-module--image--mLdvE img{border-radius:50%}.index-module--caption--44zvx{padding:20px}.index-module--italic--CVP4O{font-style:italic}.index-module--muted--O1hS0{color:#545454;padding-bottom:10px}.index-module--vita-items--\+ekRx{display:flex;flex-direction:column;position:relative}.index-module--vita-items--\+ekRx:before{background-color:#e4e4e4;bottom:0;content:"";left:calc(50% - 1px);position:absolute;top:0;width:2px}.index-module--vita-items__themed--dVBi-:before{background-color:#823eb7}.index-module--vita-item--2acKL{align-items:flex-start;align-self:center;display:flex;justify-content:center;margin:0;max-width:400px}@media(max-width:900px){.index-module--vita-item--2acKL{margin-left:0!important;margin-right:0!important}}.index-module--caption--fD5aX{min-height:250px;padding:0 20px}.index-module--caption--fD5aX h4{margin:10px 0 0}@media(max-width:900px){.index-module--caption--fD5aX{background-color:#fff;margin-bottom:50px;margin-top:150px;min-height:0;text-align:center!important;z-index:5}}.index-module--memory-image--KoXeD{height:120px;left:50%;margin-left:-60px;position:absolute;width:120px}.index-module--memory-image--KoXeD img{border-radius:50%}.index-module--newest-memory--KNlF5{text-align:center}
|
|
]]>
|
|
</style>
|
|
<link rel="alternate" type="application/rss+xml" title="RWieruch" href="/index.xml" />
|
|
<link rel="preconnect" href="https://www.google-analytics.com" />
|
|
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
|
|
<style type="text/css">
|
|
/*<![CDATA[*/
|
|
.anchor.before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translateX(-100%);
|
|
padding-right: 4px;
|
|
}
|
|
.anchor.after {
|
|
display: inline-block;
|
|
padding-left: 4px;
|
|
}
|
|
h1 .anchor svg,
|
|
h2 .anchor svg,
|
|
h3 .anchor svg,
|
|
h4 .anchor svg,
|
|
h5 .anchor svg,
|
|
h6 .anchor svg {
|
|
visibility: hidden;
|
|
}
|
|
h1:hover .anchor svg,
|
|
h2:hover .anchor svg,
|
|
h3:hover .anchor svg,
|
|
h4:hover .anchor svg,
|
|
h5:hover .anchor svg,
|
|
h6:hover .anchor svg,
|
|
h1 .anchor:focus svg,
|
|
h2 .anchor:focus svg,
|
|
h3 .anchor:focus svg,
|
|
h4 .anchor:focus svg,
|
|
h5 .anchor:focus svg,
|
|
h6 .anchor:focus svg {
|
|
visibility: visible;
|
|
}
|
|
/*]]>*/
|
|
</style>
|
|
<script async="async" src="https://www.google-analytics.com/analytics.js"></script>
|
|
<script>
|
|
<![CDATA[
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
var hash = window.decodeURI(location.hash.replace('#', ''))
|
|
if (hash !== '') {
|
|
var element = document.getElementById(hash)
|
|
if (element) {
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
var clientTop = document.documentElement.clientTop || document.body.clientTop || 0
|
|
var offset = element.getBoundingClientRect().top + scrollTop - clientTop
|
|
// Wait for the browser to finish rendering before scrolling.
|
|
setTimeout((function() {
|
|
window.scrollTo(0, offset - 100)
|
|
}), 0)
|
|
}
|
|
}
|
|
})
|
|
]]>
|
|
</script>
|
|
<title>
|
|
How to fetch data with React Hooks
|
|
</title>
|
|
<link data-react-helmet="true" rel="sitemap" type="application/xml" href="/sitemap.xml" />
|
|
<link rel="canonical" href="https://www.robinwieruch.de/react-hooks-fetch-data/" data-baseprotocol="https:" data-basehost="www.robinwieruch.de" />
|
|
<link rel="icon" href="/favicon-32x32.png?v=9db82c76a9aaf54925ac42d41f3d384c" type="image/png" />
|
|
<link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous" />
|
|
<link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
<link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
<link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
<link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
<link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=9db82c76a9aaf54925ac42d41f3d384c" />
|
|
</head>
|
|
<body itemscope="itemscope" itemtype="http://schema.org/WebPage">
|
|
<div id="___gatsby">
|
|
<div tabindex="-1" id="gatsby-focus-wrapper" style="outline: none;">
|
|
<div class="Layout-module--container--uKGcW">
|
|
<ul class="ShareButtons-module--share-button-list--2aikG">
|
|
<li class="ShareButtons-module--share-button-item--XPSPA">
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.robinwieruch.de/react-hooks-fetch-data/&quote=I%20just%20read%20"How%20to%20fetch%20data%20with%20React%20Hooks"%20by%20@rwieruch%20%23ReactJs" target="_blank" rel="noopener noreferrer" aria-label="Share On Social Media: facebook"><svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewbox="0 0 96.124 96.123">
|
|
<path d="M72.089.02L59.624 0C45.62 0 36.57 9.285 36.57 23.656v10.907H24.037a1.96 1.96 0 00-1.96 1.961v15.803a1.96 1.96 0 001.96 1.96H36.57v39.876a1.96 1.96 0 001.96 1.96h16.352a1.96 1.96 0 001.96-1.96V54.287h14.654a1.96 1.96 0 001.96-1.96l.006-15.803a1.963 1.963 0 00-1.961-1.961H56.842v-9.246c0-4.444 1.059-6.7 6.848-6.7l8.397-.003a1.96 1.96 0 001.959-1.96V1.98A1.96 1.96 0 0072.089.02z"></path></svg></a>
|
|
</li>
|
|
<li class="ShareButtons-module--share-button-item--XPSPA">
|
|
<a href="https://twitter.com/share?text=I%20just%20read%20"How%20to%20fetch%20data%20with%20React%20Hooks"%20by%20@rwieruch%20%23ReactJs&url=https://www.robinwieruch.de/react-hooks-fetch-data/" target="_blank" rel="noopener noreferrer" aria-label="Share On Social Media: twitter"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 310 310" height="30px" width="30px">
|
|
<path d="M302.973 57.388a117.512 117.512 0 01-14.993 5.463 66.276 66.276 0 0013.494-23.73 5 5 0 00-7.313-5.824 117.994 117.994 0 01-34.878 13.783c-12.381-12.098-29.197-18.983-46.581-18.983-36.695 0-66.549 29.853-66.549 66.547 0 2.89.183 5.764.545 8.598C101.163 99.244 58.83 76.863 29.76 41.204a5.001 5.001 0 00-8.196.642c-5.896 10.117-9.013 21.688-9.013 33.461 0 16.035 5.725 31.249 15.838 43.137a56.37 56.37 0 01-8.907-3.977 5 5 0 00-7.427 4.257c-.007.295-.007.59-.007.889 0 23.935 12.882 45.484 32.577 57.229a57.372 57.372 0 01-5.063-.735 4.998 4.998 0 00-5.699 6.437c7.29 22.76 26.059 39.501 48.749 44.605-18.819 11.787-40.34 17.961-62.932 17.961a120.4 120.4 0 01-14.095-.826 5 5 0 00-3.286 9.174c29.023 18.609 62.582 28.445 97.047 28.445 67.754 0 110.139-31.95 133.764-58.753 29.46-33.421 46.356-77.658 46.356-121.367 0-1.826-.028-3.67-.084-5.508 11.623-8.757 21.63-19.355 29.773-31.536a5 5 0 00-6.182-7.351z"></path></svg></a>
|
|
</li>
|
|
<li class="ShareButtons-module--share-button-item--XPSPA">
|
|
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.robinwieruch.de/react-hooks-fetch-data/&title=How%20to%20fetch%20data%20with%20React%20Hooks" target="_blank" rel="noopener noreferrer" aria-label="Share On Social Media: linkedin"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 310 310" height="30px" width="30px">
|
|
<path d="M72.16 99.73H9.927a5 5 0 00-5 5v199.928a5 5 0 005 5H72.16a5 5 0 005-5V104.73a5 5 0 00-5-5zM41.066.341C18.422.341 0 18.743 0 41.362 0 63.991 18.422 82.4 41.066 82.4c22.626 0 41.033-18.41 41.033-41.038C82.1 18.743 63.692.341 41.066.341zM230.454 94.761c-24.995 0-43.472 10.745-54.679 22.954V104.73a5 5 0 00-5-5h-59.599a5 5 0 00-5 5v199.928a5 5 0 005 5h62.097a5 5 0 005-5V205.74c0-33.333 9.054-46.319 32.29-46.319 25.306 0 27.317 20.818 27.317 48.034v97.204a5 5 0 005 5H305a5 5 0 005-5V194.995c0-49.565-9.451-100.234-79.546-100.234z"></path></svg></a>
|
|
</li>
|
|
</ul>
|
|
<nav role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" class="Navigation-module--nav--aexc7">
|
|
<div class="Navigation-module--navbar--0Czx7">
|
|
<a itemprop="url" class="Navigation-module--logo-as-a-link--f3lah" href="/"><img height="40" width="120" src="/logo.svg" alt="logo" /></a>
|
|
<ul class="Navigation-module--link-list--o6mVI">
|
|
<li class="Navigation-module--link-item--gsN1G">
|
|
<a itemprop="url" class="Navigation-module--link--gIgrN" href="/about/">About</a>
|
|
</li>
|
|
<li class="Navigation-module--link-item--gsN1G">
|
|
<a itemprop="url" class="Navigation-module--link--gIgrN" href="/work-with-me/">Hire</a>
|
|
</li>
|
|
<li class="Navigation-module--link-item--gsN1G">
|
|
<a itemprop="url" class="Navigation-module--link--gIgrN" href="/blog/">Blog</a>
|
|
</li>
|
|
<li class="Navigation-module--link-item--gsN1G">
|
|
<a href="https://courses.robinwieruch.de" target="_blank" rel="noopener noreferrer" class="Navigation-module--link--gIgrN">Courses</a>
|
|
</li>
|
|
<li class="Navigation-module--link-item--gsN1G">
|
|
<a itemprop="url" class="Navigation-module--link--gIgrN" href="/index.xml">RSS</a>
|
|
</li>
|
|
</ul>
|
|
<div class="Navigation-module--mobile-toggle--FHOTm">
|
|
<button class="Button-module--base--1Ilc7" type="button" aria-label="Toggle Mobile Navigation Open/Close"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewbox="0 0 124 124">
|
|
<path d="M112 6H12C5.4 6 0 11.4 0 18s5.4 12 12 12h100c6.6 0 12-5.4 12-12s-5.4-12-12-12zM112 50H12C5.4 50 0 55.4 0 62s5.4 12 12 12h100c6.6 0 12-5.4 12-12s-5.4-12-12-12zM112 94H12c-6.6 0-12 5.4-12 12s5.4 12 12 12h100c6.6 0 12-5.4 12-12s-5.4-12-12-12z"></path></svg></button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main itemscope="itemscope" itemprop="mainContentOfPage" class="Layout-module--content--DgRZy" style="margin-top: 55px;">
|
|
<section itemscope="itemscope" itemtype="http://schema.org/Article" class="post-module--container--e01vr">
|
|
<header class="post-module--header--PvAqW">
|
|
<h1 itemprop="headline">
|
|
How to fetch data with React Hooks
|
|
</h1>
|
|
<meta itemprop="name" content="How to fetch data with React Hooks" />
|
|
<div class="post-module--subheaderPrimary--rtp98">
|
|
<span class="post-module--subheader--Rd029">
|
|
<meta itemprop="description" content="A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API ..." /><time itemprop="datePublished" datetime="2019-03-07">March 07, 2019</time>
|
|
<meta itemprop="dateModified" content="2019-03-07" />
|
|
<meta itemprop="keywords" content="react fetch data hooks" />
|
|
<meta itemprop="wordCount" content="2510" /><span> by <span>Robin Wieruch</span>
|
|
<meta itemprop="author" content="Robin Wieruch" /></span></span>
|
|
<div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
|
|
<meta itemprop="name" />
|
|
</div><span> - <a href="https://github.com/rwieruch/blog_robinwieruch_content/edit/master/blog/react-hooks-fetch-data/index.md" target="_blank" rel="noopener noreferrer">Edit this Post</a></span>
|
|
</div>
|
|
<ul class="FollowButtons-module--follow-button-list--ueM31">
|
|
<li class="FollowButtons-module--follow-button-item--0lXU5">
|
|
<a href="https://twitter.com/intent/follow?screen_name=rwieruch" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/follow-%40rwieruch-1DA1F2?logo=twitter&style=social&label=Follow%20on%20Twitter" alt="Follow on Twitter" /></a>
|
|
</li>
|
|
<li class="FollowButtons-module--follow-button-item--0lXU5">
|
|
<a href="https://www.facebook.com/rwieruch" target="_blank" rel="noopener noreferrer" class="FollowButtons-module--facebook-follow--MetDt"><svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewbox="0 0 96.124 96.123">
|
|
<path d="M72.089.02L59.624 0C45.62 0 36.57 9.285 36.57 23.656v10.907H24.037a1.96 1.96 0 00-1.96 1.961v15.803a1.96 1.96 0 001.96 1.96H36.57v39.876a1.96 1.96 0 001.96 1.96h16.352a1.96 1.96 0 001.96-1.96V54.287h14.654a1.96 1.96 0 001.96-1.96l.006-15.803a1.963 1.963 0 00-1.961-1.961H56.842v-9.246c0-4.444 1.059-6.7 6.848-6.7l8.397-.003a1.96 1.96 0 001.959-1.96V1.98A1.96 1.96 0 0072.089.02z"></path></svg> Follow on Facebook</a>
|
|
</li>
|
|
</ul>
|
|
</header>
|
|
<meta itemprop="mainEntityOfPage" content="https://www.robinwieruch.de/react-hooks-fetch-data/" />
|
|
<article itemprop="articleBody">
|
|
<p>
|
|
In this tutorial, I want to show you <strong>how to fetch data in React with Hooks</strong> by using the <a href="https://reactjs.org/docs/hooks-state.html" target="_blank" rel="noopener noreferrer">state</a> and <a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="noopener noreferrer">effect</a> hooks. We will use the widely known <a href="https://hn.algolia.com/api" target="_blank" rel="noopener noreferrer">Hacker News API</a> to fetch popular articles from the tech world. You will also implement your custom hook for the data fetching that can be reused anywhere in your application or published on npm as standalone node package.
|
|
</p>
|
|
<p>
|
|
If you don't know anything about this new React feature, checkout this <a itemprop="url" href="/react-hooks/">introduction to React Hooks</a>. If you want to checkout the finished project for the showcased examples that show how to fetch data in React with Hooks, checkout this <a href="https://github.com/the-road-to-learn-react/react-hooks-introduction" target="_blank" rel="noopener noreferrer">GitHub repository</a>.
|
|
</p>
|
|
<p>
|
|
If you just want to have a ready to go React Hook for data fetching: <code>npm install use-data-api</code> and follow the <a href="https://github.com/the-road-to-learn-react/use-data-api" target="_blank" rel="noopener noreferrer">documentation</a>. Don't forget to star it if you use it :-)
|
|
</p>
|
|
<p>
|
|
<strong>Note:</strong> In the future, React Hooks are not be intended for data fetching in React. Instead, a feature called Suspense will be in charge for it. The following walkthrough is nonetheless a great way to learn more about state and effect hooks in React.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="data-fetching-with-react-hooks" style="position: relative;">
|
|
<a href="#data-fetching-with-react-hooks" target="_blank" rel="noopener noreferrer" aria-label="data fetching with react hooks permalink" class="anchor before"><svg height="0" width="0"></svg></a>Data Fetching with React Hooks
|
|
</h2>
|
|
<p>
|
|
If you are not familiar with data fetching in React, checkout my <a itemprop="url" href="/react-fetching-data/">extensive data fetching in React article</a>. It walks you through data fetching with React class components, how it can be made reusable with <a itemprop="url" href="/react-render-props/">Render Prop Components</a> and <a itemprop="url" href="/react-higher-order-components/">Higher-Order Components</a>, and how it deals with error handling and loading spinners. In this article, I want to show you all of it with React Hooks in function components.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports">useState</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
The App component shows a list of items (hits = Hacker News articles). The state and state update function come from the state hook called <code>useState</code> that is responsible to manage the local state for the data that we are going to fetch for the App component. The initial state is an empty list of hits in an object that represents the data. No one is setting any state for this data yet.
|
|
</p>
|
|
<p>
|
|
We are going to use <a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">axios</a> to fetch data, but it is up to you to use another data fetching library or the native fetch API of the browser. If you haven't installed axios yet, you can do so by on the command line with <code>npm install axios</code>. Then implement your effect hook for the data fetching:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useEffect</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
The effect hook called useEffect is used to fetch the data with axios from the API and to set the data in the local state of the component with the state hook's update function. The promise resolving happens with async/await.
|
|
</p>
|
|
<p>
|
|
However, when you run your application, you should stumble into a nasty loop. The effect hook runs when the component mounts but also when the component updates. Because we are setting the state after every data fetch, the component updates and the effect runs again. It fetches the data again and again. That's a bug and needs to be avoided. <strong>We only want to fetch data when the component mounts.</strong> That's why you can provide an empty array as second argument to the effect hook to avoid activating it on component updates but only for the mounting of the component.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useEffect</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
The second argument can be used to define all the variables (allocated in this array) on which the hook depends. If one of the variables changes, the hook runs again. If the array with the variables is empty, the hook doesn't run when updating the component at all, because it doesn't have to watch any variables.
|
|
</p>
|
|
<p>
|
|
There is one last catch. In the code, we are using async/await to fetch data from a third-party API. According to the documentation every function annotated with async returns an implicit promise: <em>"The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. "</em>. However, an effect hook should return nothing or a clean up function. That's why you may see the following warning in your developer console log: <strong>07:41:22.910 index.js:1452 Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.</strong>. That's why using async directly in the <code>useEffect</code> function isn't allowed. Let's implement a workaround for it, by using the async function inside the effect.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useEffect</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
That's data fetching with React hooks in a nutshell. But continue reading if you are interested about error handling, loading indicators, how to trigger the data fetching from a form, and how to implement a reusable data fetching hook.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="how-to-trigger-a-hook-programmatically--manually" style="position: relative;">
|
|
<a href="#how-to-trigger-a-hook-programmatically--manually" target="_blank" rel="noopener noreferrer" aria-label="how to trigger a hook programmatically manually permalink" class="anchor before"><svg height="0" width="0"></svg></a>How to trigger a hook programmatically / manually?
|
|
</h2>
|
|
<p>
|
|
Great, we are fetching data once the component mounts. But what about using an input field to tell the API in which topic we are interested in? "Redux" is taken as default query. But what about topics about "React"? Let's implement an input element to enable someone to fetch other stories than "Redux" stories. Therefore, introduce a new state for the input element.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports maybe-class-name">Fragment</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useEffect</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
At the moment, both states are independent from each other, but now you want to couple them to only fetch articles that are specified by the query in the input field. With the following change, the component should fetch all articles by query term once it mounted.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token template-string interpolation">query</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
One piece is missing: When you try to type something into the input field, there is no other data fetching after the mounting triggered from the effect. That's because you have provided the empty array as second argument to the effect. The effect depends on no variables, so it is only triggered when the component mounts. However, now the effect should depend on the query. Once the query changes, the data request should fire again.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token template-string interpolation">query</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
The refetching of the data should work once you change the value in the input field. But that opens up another problem: On every character you type into the input field, the effect is triggered and executes another data fetching request. How about providing a button that triggers the request and therefore the hook manually?
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">search</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setSearch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">''</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token template-string interpolation">query</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">button</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setSearch</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain-text">Search</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<p>
|
|
Now, make the effect dependant on the search state rather than the fluctuant query state that changes with every key stroke in the input field. Once the user clicks the button, the new search state is set and should trigger the effect hook kinda manually.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">search</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setSearch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token template-string interpolation">search</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">search</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
Also the initial state of the search state is set to the same state as the query state, because the component fetches data also on mount and therefore the result should mirror the value in the input field. However, having a similar query and search state is kinda confusing. Why not set the actual URL as state instead of the search state?
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">button</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setUrl</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token tag script language-javascript template-string interpolation" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain-text">Search</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<p>
|
|
That's if for the implicit programmatic data fetching with the effect hook. You can decide on which state the effect depends. Once you set this state on a click or in another side-effect, this effect will run again. In this case, if the URL state changes, the effect runs again to fetch stories from the API.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="loading-indicator-with-react-hooks" style="position: relative;">
|
|
<a href="#loading-indicator-with-react-hooks" target="_blank" rel="noopener noreferrer" aria-label="loading indicator with react hooks permalink" class="anchor before"><svg height="0" width="0"></svg></a>Loading Indicator with React Hooks
|
|
</h2>
|
|
<p>
|
|
Let's introduce a loading indicator to the data fetching. It's just another state that is managed by a state hook. The loading flag is used to render a loading indicator in the App component.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports maybe-class-name">Fragment</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useEffect</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">button</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setUrl</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token tag script language-javascript template-string interpolation" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain-text">Search</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">isLoading</span> <span class="token operator" style="color: rgb(127, 219, 202);">?</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Loading ...</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
Once the effect is called for data fetching, which happens when the component mounts or the URL state changes, the loading state is set to true. Once the request resolves, the loading state is set to false again.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="error-handling-with-react-hooks" style="position: relative;">
|
|
<a href="#error-handling-with-react-hooks" target="_blank" rel="noopener noreferrer" aria-label="error handling with react hooks permalink" class="anchor before"><svg height="0" width="0"></svg></a>Error Handling with React Hooks
|
|
</h2>
|
|
<p>
|
|
What about error handling for data fetching with a React hook? The error is just another state initialized with a state hook. Once there is an error state, the App component can render feedback for the user. When using async/await, it is common to use try/catch blocks for error handling. You can do it within the effect:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports maybe-class-name">Fragment</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useEffect</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">isError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">try</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">catch</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">error</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">button</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setUrl</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token tag script language-javascript template-string interpolation" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain-text">Search</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">isError</span> <span class="token operator" style="color: rgb(127, 219, 202);">&&</span> <span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Something went wrong ...</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">isLoading</span> <span class="token operator" style="color: rgb(127, 219, 202);">?</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Loading ...</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
The error state is reset every time the hook runs again. That's useful because after a failed request the user may want to try it again which should reset the error. In order to enforce an error yourself, you can alter the URL into something invalid. Then check whether the error message shows up.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="fetching-data-with-forms-and-react" style="position: relative;">
|
|
<a href="#fetching-data-with-forms-and-react" target="_blank" rel="noopener noreferrer" aria-label="fetching data with forms and react permalink" class="anchor before"><svg height="0" width="0"></svg></a>Fetching Data with Forms and React
|
|
</h2>
|
|
<p>
|
|
What about a proper form to fetch data? So far, we have only a combination of input field and button. Once you introduce more input elements, you may want to wrap them with a form element. In addition, a form makes it possible to trigger the button with "Enter" on the keyboard too.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onSubmit</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setUrl</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token tag script language-javascript template-string interpolation" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">submit</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Search</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">isError</span> <span class="token operator" style="color: rgb(127, 219, 202);">&&</span> <span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Something went wrong ...</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain-text">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<p>
|
|
But now the browser reloads when clicking the submit button, because that's the native behavior of the browser when submitting a form. In order to prevent the default behavior, we can invoke a function on the React event. That's how you do it in React class components too.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onSubmit</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setUrl</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token tag script language-javascript template-string interpolation" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript method function property-access" style="color: rgb(130, 170, 255);">preventDefault</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">submit</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Search</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">isError</span> <span class="token operator" style="color: rgb(127, 219, 202);">&&</span> <span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Something went wrong ...</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain-text">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<p>
|
|
Now the browser shouldn't reload anymore when you click the submit button. It works as before, but this time with a form instead of the naive input field and button combination. You can press the "Enter" key on your keyboard too.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="custom-data-fetching-hook" style="position: relative;">
|
|
<a href="#custom-data-fetching-hook" target="_blank" rel="noopener noreferrer" aria-label="custom data fetching hook permalink" class="anchor before"><svg height="0" width="0"></svg></a>Custom Data Fetching Hook
|
|
</h2>
|
|
<p>
|
|
In order to extract a custom hook for data fetching, move everything that belongs to the data fetching, except for the query state that belongs to the input field, but including the loading indicator and error handling, to its own function. Also make sure you return all the necessary variables from the function that are used in the App component.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">useHackerNewsApi</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">isError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">try</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">catch</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">error</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isError</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<p>
|
|
Now, your new hook can be used in the App component again:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isError</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">doFetch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useHackerNewsApi</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onSubmit</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">doFetch</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token tag script language-javascript template-string interpolation" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript method function property-access" style="color: rgb(130, 170, 255);">preventDefault</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">submit</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Search</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain-text">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<p>
|
|
The initial state can be made generic too. Pass it simply to the new custom hook:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token imports maybe-class-name">Fragment</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports">useEffect</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">useDataApi</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">initialUrl</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">initialUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">isError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">try</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">catch</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">error</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsError</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">setIsLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isError</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">function</span> <span class="token function maybe-class-name" style="color: rgb(130, 170, 255);">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">query</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setQuery</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token string" style="color: rgb(173, 219, 103);">'redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isLoading</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">isError</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">doFetch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useDataApi</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token string" style="color: rgb(173, 219, 103);">'https://hn.algolia.com/api/v1/search?query=redux'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">hits</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onSubmit</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">doFetch</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript template-string string" style="color: rgb(173, 219, 103);">http://hn.algolia.com/api/v1/search?query=</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">${</span><span class="token tag script language-javascript template-string interpolation" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript template-string template-punctuation string" style="color: rgb(173, 219, 103);">`</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript method function property-access" style="color: rgb(130, 170, 255);">preventDefault</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">input</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">text</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">query</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript parameter" style="color: rgb(127, 219, 202);">event</span> <span class="token tag script language-javascript arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token tag script language-javascript function" style="color: rgb(130, 170, 255);">setQuery</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">event</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">target</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">value</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);">/></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">type</span><span class="token tag attr-value punctuation attr-equals" style="color: rgb(199, 146, 234);">=</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag attr-value" style="color: rgb(127, 219, 202);">submit</span><span class="token tag attr-value punctuation" style="color: rgb(199, 146, 234);">"</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Search</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">button</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">form</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">isError</span> <span class="token operator" style="color: rgb(127, 219, 202);">&&</span> <span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Something went wrong ...</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">isLoading</span> <span class="token operator" style="color: rgb(127, 219, 202);">?</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token plain-text">Loading ...</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">div</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">data</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">hits</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token method function property-access" style="color: rgb(130, 170, 255);">map</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">item</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">key</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">objectID</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"><</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span> <span class="token tag attr-name" style="color: rgb(173, 219, 103); font-style: italic;">href</span><span class="token tag script language-javascript script-punctuation punctuation" style="color: rgb(199, 146, 234);">=</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token tag script language-javascript" style="color: rgb(127, 219, 202);">item</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token tag script language-javascript property-access" style="color: rgb(127, 219, 202);">url</span><span class="token tag script language-javascript punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span><span class="token plain">item</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">title</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">a</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">li</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag" style="color: rgb(127, 219, 202);">ul</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token tag punctuation" style="color: rgb(199, 146, 234);"></</span><span class="token tag class-name" style="color: rgb(255, 203, 139);">Fragment</span><span class="token tag punctuation" style="color: rgb(199, 146, 234);">></span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">export</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
That's it for the data fetching with a custom hook. The hook itself doesn't know anything about the API. It receives all parameters from the outside and only manages necessary states such as the data, loading and error state. It executes the request and returns the data to the component using it as custom data fetching hook.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="reducer-hook-for-data-fetching" style="position: relative;">
|
|
<a href="#reducer-hook-for-data-fetching" target="_blank" rel="noopener noreferrer" aria-label="reducer hook for data fetching permalink" class="anchor before"><svg height="0" width="0"></svg></a>Reducer Hook for Data Fetching
|
|
</h2>
|
|
<p>
|
|
So far, we have used various state hooks to manage our data fetching state for the data, loading and error state. However, somehow all these states, <a itemprop="url" href="/react-usereducer-vs-usestate/">managed with their own state hook, belong together because they care about the same cause</a>. As you can see, they are all used within the data fetching function. A good indicator that they belong together is that they are used one after another (e.g. <code>setIsError</code>, <code>setIsLoading</code>). Let's combine all three of them with a <a itemprop="url" href="/react-usereducer-hook/">Reducer Hook</a> instead.
|
|
</p>
|
|
<p>
|
|
A Reducer Hook returns us a state object and a function to alter the state object. The function -- called dispatch function -- takes an action which has a type and an optional payload. All this information is used in the actual reducer function to distill a new state from the previous state, the action's optional payload and type. Let's see how this works in code:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports maybe-class-name">React</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token imports punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token imports maybe-class-name">Fragment</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token imports">useState</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token imports">useEffect</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token imports">useReducer</span><span class="token imports punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token imports punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'react'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">import</span> <span class="token imports">axios</span> <span class="token keyword module" style="color: rgb(127, 219, 202);">from</span> <span class="token string" style="color: rgb(173, 219, 103);">'axios'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">dataFetchReducer</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">state</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">action</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">useDataApi</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">initialUrl</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">initialUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">dataFetchReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isLoading</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isError</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">data</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token plain">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
The Reducer Hook takes the reducer function and an initial state object as parameters. In our case, the arguments of the initial states for the data, loading and error state didn't change, but they have been aggregated to one state object managed by one reducer hook instead of single state hooks.
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">dataFetchReducer</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">state</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">action</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">useDataApi</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">initialUrl</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">initialUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">dataFetchReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isLoading</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isError</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">data</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token plain">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">type</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_INIT'</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">try</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">type</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_SUCCESS'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">payload</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">catch</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">error</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">type</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_FAILURE'</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
Now, when fetching data, the dispatch function can be used to send information to the reducer function. The object being send with the dispatch function has a mandatory <code>type</code> property and an optional <code>payload</code> property. The type tells the reducer function which state transition needs to be applied and the payload can additionally be used by the reducer to distill the new state. After all, we only have three state transitions: initializing the fetching process, notifying about a successful data fetching result, and notifying about an erroneous data fetching result.
|
|
</p>
|
|
<p>
|
|
In the end of the custom hook, the state is returned as before, but because we have a state object and not the standalone states anymore. This way, the one who calls the <code>useDataApi</code> custom hook still gets access to <code>data</code>, <code>isLoading</code> and <code>isError</code>:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">useDataApi</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">initialUrl</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">initialUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">dataFetchReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isLoading</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isError</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">data</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token plain">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
Last but not least, the implementation of the reducer function is missing. It needs to act on three different state transitions called <code>FETCH_INIT</code>, <code>FETCH_SUCCESS</code> and <code>FETCH_FAILURE</code>. Each state transition needs to return a new state object. Let's see how this can be implemented with a switch case statement:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">dataFetchReducer</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">state</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">action</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">switch</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">action</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">type</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">case</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_INIT'</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token spread operator" style="color: rgb(127, 219, 202);">...</span><span class="token plain">state</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">case</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_SUCCESS'</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token spread operator" style="color: rgb(127, 219, 202);">...</span><span class="token plain">state</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">case</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_FAILURE'</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token spread operator" style="color: rgb(127, 219, 202);">...</span><span class="token plain">state</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">default</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">throw</span> <span class="token keyword" style="color: rgb(127, 219, 202);">new</span> <span class="token class-name" style="color: rgb(255, 203, 139);">Error</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
A reducer function has access to the current state and the incoming action via its arguments. So far, in out switch case statement each state transition only returns the previous state. A destructuring statement is used to keep the state object immutable -- meaning the state is never directly mutated -- to enforce best practices. Now let's override a few of the current's state returned properties to alter the state with each state transition:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">dataFetchReducer</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">state</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">action</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">switch</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">action</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">type</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">case</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_INIT'</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isLoading</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isError</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">case</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_SUCCESS'</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isLoading</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isError</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">data</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token plain">action</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">payload</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">case</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_FAILURE'</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token spread operator" style="color: rgb(127, 219, 202);">...</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isLoading</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isError</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword module" style="color: rgb(127, 219, 202);">default</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">throw</span> <span class="token keyword" style="color: rgb(127, 219, 202);">new</span> <span class="token class-name" style="color: rgb(255, 203, 139);">Error</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
Now every state transition, decided by the action's type, returns a new state based on the previous state and the optional payload. For instance, in the case of a successful request, the payload is used to set the data of the new state object.
|
|
</p>
|
|
<p>
|
|
In conclusion, the Reducer Hook makes sure that this portion of the state management is encapsulated with its own logic. By providing action types and optional payloads, you will always end up with a predicatbale state change. In addition, you will never run into invalid states. For instance, previously it would have been possible to accidently set the <code>isLoading</code> and <code>isError</code> states to true. What should be displayed in the UI for this case? Now, each state transition defined by the reducer function leads to a valid state object.
|
|
</p>
|
|
<h2 class="Title-module--title--DszB6" id="abort-data-fetching-in-effect-hook" style="position: relative;">
|
|
<a href="#abort-data-fetching-in-effect-hook" target="_blank" rel="noopener noreferrer" aria-label="abort data fetching in effect hook permalink" class="anchor before"><svg height="0" width="0"></svg></a>Abort Data Fetching in Effect Hook
|
|
</h2>
|
|
<p>
|
|
It's a common problem in React that component state is set even though the component got already unmounted (e.g. due to navigating away with React Router). I have written about this issue previously over here which describes <a itemprop="url" href="/react-warning-cant-call-setstate-on-an-unmounted-component/">how to prevent setting state for unmounted components</a> in various scenarios. Let's see how we can prevent to set state in our custom hook for the data fetching:
|
|
</p>
|
|
<pre class="prism-code language-jsx" style="color: rgb(214, 222, 235); background-color: rgb(1, 22, 39); margin-bottom: 0px; padding: 20px; overflow: auto; max-width: calc(100vw - 80px);"></pre>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">useDataApi</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token parameter">initialUrl</span><span class="token parameter punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token parameter">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useState</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">initialUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token function" style="color: rgb(130, 170, 255);">useReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">dataFetchReducer</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isLoading</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">isError</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token literal-property property" style="color: rgb(128, 203, 196);">data</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token plain">initialData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">useEffect</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">let</span> <span class="token plain">didCancel</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token boolean" style="color: rgb(255, 88, 116);">false</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token function-variable function" style="color: rgb(130, 170, 255);">fetchData</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword" style="color: rgb(127, 219, 202);">async</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">type</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_INIT'</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">try</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword" style="color: rgb(127, 219, 202);">const</span> <span class="token plain">result</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">await</span> <span class="token function" style="color: rgb(130, 170, 255);">axios</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">if</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token operator" style="color: rgb(127, 219, 202);">!</span><span class="token plain">didCancel</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">type</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_SUCCESS'</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">payload</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token plain">result</span><span class="token punctuation" style="color: rgb(199, 146, 234);">.</span><span class="token property-access">data</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span> <span class="token keyword control-flow" style="color: rgb(127, 219, 202);">catch</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token plain">error</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">if</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token operator" style="color: rgb(127, 219, 202);">!</span><span class="token plain">didCancel</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">dispatch</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">{</span> <span class="token literal-property property" style="color: rgb(128, 203, 196);">type</span><span class="token operator" style="color: rgb(127, 219, 202);">:</span> <span class="token string" style="color: rgb(173, 219, 103);">'FETCH_FAILURE'</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token function" style="color: rgb(130, 170, 255);">fetchData</span><span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">(</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span> <span class="token arrow operator" style="color: rgb(127, 219, 202);">=></span> <span class="token punctuation" style="color: rgb(199, 146, 234);">{</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token plain">didCancel</span> <span class="token operator" style="color: rgb(127, 219, 202);">=</span> <span class="token boolean" style="color: rgb(255, 88, 116);">true</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line highlight-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">url</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">)</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);"></div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token keyword control-flow" style="color: rgb(127, 219, 202);">return</span> <span class="token punctuation" style="color: rgb(199, 146, 234);">[</span><span class="token plain">state</span><span class="token punctuation" style="color: rgb(199, 146, 234);">,</span> <span class="token plain">setUrl</span><span class="token punctuation" style="color: rgb(199, 146, 234);">]</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<div class="token-line" style="color: rgb(214, 222, 235);">
|
|
<span class="token punctuation" style="color: rgb(199, 146, 234);">}</span><span class="token punctuation" style="color: rgb(199, 146, 234);">;</span>
|
|
</div>
|
|
<p>
|
|
Every Effect Hook comes with a clean up function which runs when a component unmounts. The clean up function is the one function returned from the hook. In our case, we use a boolean flag called <code>didCancel</code> to let our data fetching logic know about the state (mounted/unmounted) of the component. If the component did unmount, the flag should be set to <code>true</code> which results in preventing to set the component state after the data fetching has been asynchronously resolved eventually.
|
|
</p>
|
|
<p>
|
|
<em>Note: Actually not the data fetching is aborted -- which could be achieved with <a href="https://github.com/axios/axios#cancellation" target="_blank" rel="noopener noreferrer">Axios Cancellation</a> -- but the state transition is not performed anymore for the unmounted component. Since Axios Cancellation has not the best API in my eyes, this boolean flag to prevent setting state does the job as well.</em>
|
|
</p>
|
|
<hr class="Divider-module--divider--EN8bi" />
|
|
<p>
|
|
You have learned how the React hooks for state and effects can be used in React for data fetching. If you are curious about data fetching in class components (and function components) with render props and higher-order components, checkout out my other article from the beginning. Otherwise, I hope this article was useful to you for learning about React Hooks and how to use them in a real world scenario.
|
|
</p>
|
|
</article>
|
|
<div class="DividerButton-module--divider--DZu6q">
|
|
<div class="DividerButton-module--absolute--+68cL">
|
|
<a href="https://twitter.com/search?q=https://www.robinwieruch.de/react-hooks-fetch-data/" target="_blank" rel="noopener noreferrer" aria-label="Discuss on Twitter">Discuss on Twitter</a><a href="https://twitter.com/share?text=I%20just%20read%20"How%20to%20fetch%20data%20with%20React%20Hooks"%20by%20@rwieruch&url=https://www.robinwieruch.de/react-hooks-fetch-data/" target="_blank" rel="noopener noreferrer" aria-label="Share on Twitter">Share on Twitter</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<div class="KeepReading-module--container--F3ycW">
|
|
<section itemscope="itemscope" itemtype="http://schema.org/Blog" class="Blog-module--blog-container--DjYg-">
|
|
<h2>
|
|
<span>Keep reading about </span><a itemprop="url" class="primary" href="/categories/react/"><span>React<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 185.343 185.343" height="16px" width="16px">
|
|
<path d="M51.707 185.343a10.692 10.692 0 01-7.593-3.149 10.724 10.724 0 010-15.175l74.352-74.347L44.114 18.32c-4.194-4.194-4.194-10.987 0-15.175 4.194-4.194 10.987-4.194 15.18 0l81.934 81.934c4.194 4.194 4.194 10.987 0 15.175l-81.934 81.939a10.678 10.678 0 01-7.587 3.15z" fill="#010002"></path></svg></span></a>
|
|
</h2>
|
|
<div class="Blog-module--blog-list--mR1qe Blog-module--blog-list__column--1qQRZ">
|
|
<article class="Blog-module--blog-item-container--k6FtN Blog-module--blog-item-container__column--NdyD7">
|
|
<div class="Blog-module--blog-item-image--+FjXT Blog-module--blog-item-image__column--IEF8v gatsby-image-wrapper" style="position: relative; overflow: hidden;">
|
|
<div aria-hidden="true" style="width: 100%; padding-bottom: 66.6667%;"></div><img aria-hidden="true" src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAABSIccs0uMf//EABoQAAIDAQEAAAAAAAAAAAAAAAECAAMhEhP/2gAIAQEAAQUCFQ82pZTwYoy1tJn/xAAXEQEAAwAAAAAAAAAAAAAAAAAAARFB/9oACAEDAQE/AcXL/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBEh/9oACAECAQE/AXR//8QAGhAAAgIDAAAAAAAAAAAAAAAAEBEAEgFRYf/aAAgBAQAGPwK18PUSD6f/xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMVGB0f/aAAgBAQABPyFtl7XubqYu+Yi0kIEHOsRZ/9oADAMBAAIAAwAAABAbz//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxBB1D//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEh/9oACAECAQE/EBGLl//EABsQAQADAQADAAAAAAAAAAAAAAEAESExYXGR/9oACAEBAAE/ECRGAajteHIQAKAXIqQH3Ow6BTx2GinkKaArCKVv7P/Z" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition-delay: 500ms;" /><picture><source srcset="/static/1daf8df66101e85a2309c8efe1292af8/25b50/banner.jpg 75w, /static/1daf8df66101e85a2309c8efe1292af8/aabdf/banner.jpg 150w, /static/1daf8df66101e85a2309c8efe1292af8/9dc27/banner.jpg 300w, /static/1daf8df66101e85a2309c8efe1292af8/32fd5/banner.jpg 450w, /static/1daf8df66101e85a2309c8efe1292af8/4fe8c/banner.jpg 600w, /static/1daf8df66101e85a2309c8efe1292af8/16310/banner.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" /><img sizes="(max-width: 300px) 100vw, 300px" srcset="/static/1daf8df66101e85a2309c8efe1292af8/25b50/banner.jpg 75w, /static/1daf8df66101e85a2309c8efe1292af8/aabdf/banner.jpg 150w, /static/1daf8df66101e85a2309c8efe1292af8/9dc27/banner.jpg 300w, /static/1daf8df66101e85a2309c8efe1292af8/32fd5/banner.jpg 450w, /static/1daf8df66101e85a2309c8efe1292af8/4fe8c/banner.jpg 600w, /static/1daf8df66101e85a2309c8efe1292af8/16310/banner.jpg 1024w" src="/static/1daf8df66101e85a2309c8efe1292af8/9dc27/banner.jpg" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 500ms ease 0s;" /></picture><noscript><picture><source srcset="/static/1daf8df66101e85a2309c8efe1292af8/25b50/banner.jpg 75w, /static/1daf8df66101e85a2309c8efe1292af8/aabdf/banner.jpg 150w, /static/1daf8df66101e85a2309c8efe1292af8/9dc27/banner.jpg 300w, /static/1daf8df66101e85a2309c8efe1292af8/32fd5/banner.jpg 450w, /static/1daf8df66101e85a2309c8efe1292af8/4fe8c/banner.jpg 600w, /static/1daf8df66101e85a2309c8efe1292af8/16310/banner.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" /><img loading="lazy" sizes="(max-width: 300px) 100vw, 300px" srcset="/static/1daf8df66101e85a2309c8efe1292af8/25b50/banner.jpg 75w, /static/1daf8df66101e85a2309c8efe1292af8/aabdf/banner.jpg 150w, /static/1daf8df66101e85a2309c8efe1292af8/9dc27/banner.jpg 300w, /static/1daf8df66101e85a2309c8efe1292af8/32fd5/banner.jpg 450w, /static/1daf8df66101e85a2309c8efe1292af8/4fe8c/banner.jpg 600w, /static/1daf8df66101e85a2309c8efe1292af8/16310/banner.jpg 1024w" src="/static/1daf8df66101e85a2309c8efe1292af8/9dc27/banner.jpg" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center" /></picture></noscript>
|
|
</div>
|
|
<div class="Blog-module--blog-item-content--2UJPQ">
|
|
<header>
|
|
<h2 itemprop="name headline">
|
|
<a itemprop="url" class="HoverLink-module--hover-link--BtPN5" aria-label="Go To Blog Post" href="/axios-jest/">How to test Axios in Jest by Example</a>
|
|
</h2>
|
|
</header>
|
|
<p>
|
|
Every once in a while we need to test API requests. Axios is one of the most popular JavaScript libraries to fetch data from remote APIs . Hence, we will use Axios for our data fetching example…
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="Blog-module--blog-item-container--k6FtN Blog-module--blog-item-container__column--NdyD7">
|
|
<div class="Blog-module--blog-item-image--+FjXT Blog-module--blog-item-image__column--IEF8v gatsby-image-wrapper" style="position: relative; overflow: hidden;">
|
|
<div aria-hidden="true" style="width: 100%; padding-bottom: 66.6667%;"></div><img aria-hidden="true" src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMFAQb/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABa2XkdATBP//EABsQAQACAgMAAAAAAAAAAAAAAAECAwAQERQi/9oACAEBAAEFAi3lLI6qVjF9dhz/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAgMAAAAAAAAAAAAAAAAAMQEQIYKR/9oACAEBAAY/Apwr6aiP/8QAGxABAAIDAQEAAAAAAAAAAAAAAQARMUFRYSH/2gAIAQEAAT8hMVjrsVv3EMSoLqnnyUXzYgYCWf/aAAwDAQACAAMAAAAQEO//xAAWEQEBAQAAAAAAAAAAAAAAAAAAESH/2gAIAQMBAT8QmI//xAAWEQADAAAAAAAAAAAAAAAAAAAQESH/2gAIAQIBAT8QdH//xAAaEAEBAQEBAQEAAAAAAAAAAAABEQBRIWGB/9oACAEBAAE/EGudJSIjncwArPDFLN8MYqJRxfn65RRBE7TLwgPRTf/Z" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition-delay: 500ms;" /><picture><source srcset="/static/4f248ba8d9c5833fb4449d3114ff0c28/25b50/banner.jpg 75w, /static/4f248ba8d9c5833fb4449d3114ff0c28/aabdf/banner.jpg 150w, /static/4f248ba8d9c5833fb4449d3114ff0c28/9dc27/banner.jpg 300w, /static/4f248ba8d9c5833fb4449d3114ff0c28/32fd5/banner.jpg 450w, /static/4f248ba8d9c5833fb4449d3114ff0c28/4fe8c/banner.jpg 600w, /static/4f248ba8d9c5833fb4449d3114ff0c28/16310/banner.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" /><img sizes="(max-width: 300px) 100vw, 300px" srcset="/static/4f248ba8d9c5833fb4449d3114ff0c28/25b50/banner.jpg 75w, /static/4f248ba8d9c5833fb4449d3114ff0c28/aabdf/banner.jpg 150w, /static/4f248ba8d9c5833fb4449d3114ff0c28/9dc27/banner.jpg 300w, /static/4f248ba8d9c5833fb4449d3114ff0c28/32fd5/banner.jpg 450w, /static/4f248ba8d9c5833fb4449d3114ff0c28/4fe8c/banner.jpg 600w, /static/4f248ba8d9c5833fb4449d3114ff0c28/16310/banner.jpg 1024w" src="/static/4f248ba8d9c5833fb4449d3114ff0c28/9dc27/banner.jpg" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 500ms ease 0s;" /></picture><noscript><picture><source srcset="/static/4f248ba8d9c5833fb4449d3114ff0c28/25b50/banner.jpg 75w, /static/4f248ba8d9c5833fb4449d3114ff0c28/aabdf/banner.jpg 150w, /static/4f248ba8d9c5833fb4449d3114ff0c28/9dc27/banner.jpg 300w, /static/4f248ba8d9c5833fb4449d3114ff0c28/32fd5/banner.jpg 450w, /static/4f248ba8d9c5833fb4449d3114ff0c28/4fe8c/banner.jpg 600w, /static/4f248ba8d9c5833fb4449d3114ff0c28/16310/banner.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" /><img loading="lazy" sizes="(max-width: 300px) 100vw, 300px" srcset="/static/4f248ba8d9c5833fb4449d3114ff0c28/25b50/banner.jpg 75w, /static/4f248ba8d9c5833fb4449d3114ff0c28/aabdf/banner.jpg 150w, /static/4f248ba8d9c5833fb4449d3114ff0c28/9dc27/banner.jpg 300w, /static/4f248ba8d9c5833fb4449d3114ff0c28/32fd5/banner.jpg 450w, /static/4f248ba8d9c5833fb4449d3114ff0c28/4fe8c/banner.jpg 600w, /static/4f248ba8d9c5833fb4449d3114ff0c28/16310/banner.jpg 1024w" src="/static/4f248ba8d9c5833fb4449d3114ff0c28/9dc27/banner.jpg" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center" /></picture></noscript>
|
|
</div>
|
|
<div class="Blog-module--blog-item-content--2UJPQ">
|
|
<header>
|
|
<h2 itemprop="name headline">
|
|
<a itemprop="url" class="HoverLink-module--hover-link--BtPN5" aria-label="Go To Blog Post" href="/react-custom-hook/">React: How to create a Custom Hook</a>
|
|
</h2>
|
|
</header>
|
|
<p>
|
|
React introduced Hooks quite a while ago. With their release, Hooks gave function components the ability to use state and side-effects with built-in Hooks such as React's useState Hook and…
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="withBorder-module--top-border--wgBtX">
|
|
<div class="index-module--container--qqW+Y">
|
|
<div class="index-module--image--VeUTI gatsby-image-wrapper" style="position: relative; overflow: hidden;">
|
|
<div aria-hidden="true" style="width: 100%; padding-bottom: 100%;"></div><img aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFlUlEQVQ4y3WUa1Mb5xXHH1eJ44bUbgkSQotWt5W0uuzqxkZCCDCKQCABElhIxgYJ2QZzDQaDJim2ob6NJ3YTY5tO6gmyzUUSxp6036H5DMnbvOwX6IxZ6/l3xKR51zPzn3POzJnfi3Mj5P/Ys9v9x7658RPy1xu9ZGMpQpautJMOP/dbDYCaTgKVPyR5oqjlZH5+4cTKSkExN7eguDo1o8hl84rMyHlFZmRE0dMdU4yeH//d9tdDnd+uD0zdXOwpLEyEHk6PtxcnL3b8czbf8+N0rvvnS6Nd/y7tbv/03d+/z5CZmRmyslIgc3OLZGpylmTHL5F0apScG86Qvt5+Eo8NEodF/S8bp4LkMaOvO4Tenk70Rj+HR7TBLfJwCVb69u0hfvjhHzfJRC5nvnp1NjExcSWeHb80kMlcTAwlUkMD/cmRaE8sE+2JXzAZ2Z+CAS+y2QvvkoOxowvnh+WhRJ88dTn7Pt7bVfW5re/eHL7G68PDVfLs2d/eVCoHePzNJu7duY/V6wVMT81gIpfH2OgY0qk0AoFWXF9eosXt59h69hh376zTp0++oTuvXtDceIYKduPR2ze/Are2vnu7fusrZIaj8miqj+YuJKoX0/HquWSkGov43w/2Bt+Fz3ZU0yMpLF+bp+vrt7C8tIgba2u4vjRPk4NR6hHNR4eHB6gcHKySBw8eHo6cS6K9zSdPXs7SoUSMJgZ7aX8sQtsCXsoZNejs7ISdN1OTrgEXh/3oCNiRS7fB3+Kk/haBSl770UGljHK5vEJu377/5tzQILJjI3Kx+D02Nx/Tp0826f17d7H25wK1W1na0R6iNqsZIt9Ex4Z9+HptAPlMCB1Bkfo8dip5bUeVSgnlcmWZ3FhbP0ynhuFz83IkHMTkRAJjmT6kk2fh89phMWkQagvCYjYh1mXB5kY/Npaj2LqXQiYZpC6BrwHlX4FLpLDy5evUcAK8RSd3BJ1YnQ7j1mIE+bQEh1UDlvkUkiShVXJgIuXGrcXPsfs4g7urccznw7Sny0ddgkWulEsolcqLZGHu2sFAvA8up1Gez4fx6EYC364P4n4hinjYBi1TjxafD6LTgrGkgKd/6ce91Sg2N5K4NhmhZ0Mu6hYscrm8j/390hckn7tS6ekOw8Hr5NGkHw++iuPJRj9uLnSh/TMjmlSn4fN6wJkM8DjUWLrShq07CawvRRGLeOC0m6nPxcul0h52dnYXSHpktNzVGYLZqJG9ogmzuTbM5YI4P+CCrrkeauUnEEUBFk4Pi6EeU6MSZsf9mMm2ISjxVHSaqUe0yvt7u3jx8uU8GYgnSkG/BAunkc1GNW0RWATcZvCGBmgaT0OtrIPNxsNqNhzHooOF12PH2ZAdTpseLsF83MO93R0Uiy/mSLgrUvK6neCMarm2Im5eC0nQw2pQgVGfocr6U9RiNsNs0lHVn05SN9eA7oCVfuZgqMPKQnRyVHRy8s7OK2xvF2eJ3x/cF5w8LBwjSy0uKvkEGgq6qShYqYFtpKpP66jRYKCcka3W2iLyrNzi1L4XeU3VyjG1s6OCg5NfvXqJ58+fzxBBcB0IggsOh+OI47iqw+GoSi2+qsloqLIsS3U6HdXrDVSnbYLXZUOw1YeAX0Jrq4T2Nqk2zBr03d7eLorF4jThOG7PZOJgMpmg1+trYIRCoeNco2HAMAyY5mZom5sOFCfIlx67snIp7fkx2GL+xWrR/cdu1UGwG/Ho0UOsrha+IFqtlmUYJskwzCCr1SaVSuVQXV3dUGNjY0KtVg80NTX1qdXqiN7o+Kjhjx/871OfuJy2nzn5+485g54J26z6vMXCRT788KMzRKttJgzDHItlWdLQ0EBOnTpFVCoVUavVv0lnEomRra8RT9RefeFqgNSdPk2MBoY4eAPxet1EqVSR/wJ9FIRWl6x0qwAAAABJRU5ErkJggg==" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition-delay: 500ms;" /><picture><source srcset="/static/f7a0c2570cccee16ab8d54ade3e1f474/61fd6/goodie.png 256w, /static/f7a0c2570cccee16ab8d54ade3e1f474/dd5bb/goodie.png 320w" sizes="(max-width: 320px) 100vw, 320px" /><img sizes="(max-width: 320px) 100vw, 320px" srcset="/static/f7a0c2570cccee16ab8d54ade3e1f474/61fd6/goodie.png 256w, /static/f7a0c2570cccee16ab8d54ade3e1f474/dd5bb/goodie.png 320w" src="/static/f7a0c2570cccee16ab8d54ade3e1f474/dd5bb/goodie.png" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 500ms ease 0s;" /></picture><noscript><picture><source srcset="/static/f7a0c2570cccee16ab8d54ade3e1f474/61fd6/goodie.png 256w, /static/f7a0c2570cccee16ab8d54ade3e1f474/dd5bb/goodie.png 320w" sizes="(max-width: 320px) 100vw, 320px" /><img loading="lazy" sizes="(max-width: 320px) 100vw, 320px" srcset="/static/f7a0c2570cccee16ab8d54ade3e1f474/61fd6/goodie.png 256w, /static/f7a0c2570cccee16ab8d54ade3e1f474/dd5bb/goodie.png 320w" src="/static/f7a0c2570cccee16ab8d54ade3e1f474/dd5bb/goodie.png" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center" /></picture></noscript>
|
|
</div>
|
|
<div class="index-module--information--2wFMl">
|
|
<h2>
|
|
The Road to React
|
|
</h2>
|
|
<p class="Lead-module--lead--nY1ek">
|
|
Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like <strong>50.000+ readers</strong>.
|
|
</p>
|
|
<div style="margin-bottom: 10px;"></div>
|
|
<div>
|
|
<a href="https://courses.robinwieruch.de" target="_blank" rel="noopener noreferrer" class="PrimaryButton-module--primary-button--XZdn- Button-module--base--1Ilc7 Button-module--base__large--fUAjB Button-module--base__round--vSjN6" role="link">Get the Book <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 185.343 185.343" height="10px" width="10px">
|
|
<path d="M51.707 185.343a10.692 10.692 0 01-7.593-3.149 10.724 10.724 0 010-15.175l74.352-74.347L44.114 18.32c-4.194-4.194-4.194-10.987 0-15.175 4.194-4.194 10.987-4.194 15.18 0l81.934 81.934c4.194 4.194 4.194 10.987 0 15.175l-81.934 81.939a10.678 10.678 0 01-7.587 3.15z" fill="#010002"></path></svg></a>
|
|
</div>
|
|
<div style="margin-bottom: 10px;"></div><small><a href="https://amzn.to/2LHjxRB" target="_blank" rel="noopener noreferrer">Get it on Amazon.</a></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="withBorder-module--top-border--wgBtX">
|
|
<div class="index-module--section-header--N19-S">
|
|
<h2 class="fonts-module--secondary-header--8cg9d">
|
|
<label for="newsletter" class="index-module--label--gZdX-">Take Part</label>
|
|
</h2>
|
|
<h3 class="fonts-module--secondary-header-muted--lkK2p">
|
|
<label for="newsletter" class="index-module--label--gZdX-">Never miss an article about web development and JavaScript.</label>
|
|
</h3>
|
|
</div>
|
|
<p class="Lead-module--lead--nY1ek">
|
|
<label for="newsletter" class="index-module--label--gZdX-"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 123.811 123.811">
|
|
<path d="M29.85 106.463c3.2 3.2 7.5 5 12 5s8.8-1.8 12-5l64.799-64.8c6.5-6.5 7-17.2.7-23.9-6.6-7.1-17.7-7.2-24.399-.4l-46 46c-3.9 3.9-10.2 3.9-14.1 0l-5.9-6c-6.6-6.6-17.4-6.6-24 0-6.6 6.601-6.6 17.4 0 24l24.9 25.1z"></path></svg>Join 50.000+ Developers</label>
|
|
</p>
|
|
<p class="Lead-module--lead--nY1ek">
|
|
<label for="newsletter" class="index-module--label--gZdX-"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 123.811 123.811">
|
|
<path d="M29.85 106.463c3.2 3.2 7.5 5 12 5s8.8-1.8 12-5l64.799-64.8c6.5-6.5 7-17.2.7-23.9-6.6-7.1-17.7-7.2-24.399-.4l-46 46c-3.9 3.9-10.2 3.9-14.1 0l-5.9-6c-6.6-6.6-17.4-6.6-24 0-6.6 6.601-6.6 17.4 0 24l24.9 25.1z"></path></svg>Learn Web Development</label>
|
|
</p>
|
|
<p class="Lead-module--lead--nY1ek">
|
|
<label for="newsletter" class="index-module--label--gZdX-"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 123.811 123.811">
|
|
<path d="M29.85 106.463c3.2 3.2 7.5 5 12 5s8.8-1.8 12-5l64.799-64.8c6.5-6.5 7-17.2.7-23.9-6.6-7.1-17.7-7.2-24.399-.4l-46 46c-3.9 3.9-10.2 3.9-14.1 0l-5.9-6c-6.6-6.6-17.4-6.6-24 0-6.6 6.601-6.6 17.4 0 24l24.9 25.1z"></path></svg>Learn JavaScript</label>
|
|
</p>
|
|
<p class="Lead-module--lead--nY1ek">
|
|
<label for="newsletter" class="index-module--label--gZdX-"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 123.811 123.811">
|
|
<path d="M29.85 106.463c3.2 3.2 7.5 5 12 5s8.8-1.8 12-5l64.799-64.8c6.5-6.5 7-17.2.7-23.9-6.6-7.1-17.7-7.2-24.399-.4l-46 46c-3.9 3.9-10.2 3.9-14.1 0l-5.9-6c-6.6-6.6-17.4-6.6-24 0-6.6 6.601-6.6 17.4 0 24l24.9 25.1z"></path></svg>Access Tutorials, eBooks and Courses</label>
|
|
</p>
|
|
<p class="Lead-module--lead--nY1ek">
|
|
<label for="newsletter" class="index-module--label--gZdX-"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 123.811 123.811">
|
|
<path d="M29.85 106.463c3.2 3.2 7.5 5 12 5s8.8-1.8 12-5l64.799-64.8c6.5-6.5 7-17.2.7-23.9-6.6-7.1-17.7-7.2-24.399-.4l-46 46c-3.9 3.9-10.2 3.9-14.1 0l-5.9-6c-6.6-6.6-17.4-6.6-24 0-6.6 6.601-6.6 17.4 0 24l24.9 25.1z"></path></svg>Personal Development as a Software Engineer</label>
|
|
</p>
|
|
<div style="margin-bottom: 20px;"></div><label for="newsletter" class="index-module--label--gZdX-"><a href="https://rwieruch.substack.com/" target="_blank" rel="noopener noreferrer" class="PrimaryButton-module--primary-button--XZdn- Button-module--base--1Ilc7 Button-module--base__large--fUAjB Button-module--base__round--vSjN6" role="link">Subscribe  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 185.343 185.343" height="10px" width="10px">
|
|
<path d="M51.707 185.343a10.692 10.692 0 01-7.593-3.149 10.724 10.724 0 010-15.175l74.352-74.347L44.114 18.32c-4.194-4.194-4.194-10.987 0-15.175 4.194-4.194 10.987-4.194 15.18 0l81.934 81.934c4.194 4.194 4.194 10.987 0 15.175l-81.934 81.939a10.678 10.678 0 01-7.587 3.15z" fill="#010002"></path></svg></a></label>
|
|
<div style="margin-bottom: 10px;"></div><label for="newsletter" class="index-module--label--gZdX-"><small><small>View our <a itemprop="url" href="/legal/">Privacy Policy</a>.</small></small></label>
|
|
</div>
|
|
<footer role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
|
|
<div class="withBorder-module--top-border--wgBtX">
|
|
<div class="index-module--container--Evuo1">
|
|
<div class="index-module--subfooter-links--WVwtv">
|
|
<small class="index-module--subfooter-label--PZVFY">Portfolio</small>
|
|
<ul>
|
|
<li class="index-module--footer-link--F2nJ6">
|
|
<a href="https://courses.robinwieruch.de" target="_blank" rel="noopener noreferrer" aria-label="Go To Sub Footer Link: Online Courses"><small>Online Courses</small></a>
|
|
</li>
|
|
<li class="index-module--footer-link--F2nJ6">
|
|
<a href="https://github.com/rwieruch" target="_blank" rel="noopener noreferrer" aria-label="Go To Sub Footer Link: Open Source"><small>Open Source</small></a>
|
|
</li>
|
|
<li class="index-module--footer-link--F2nJ6">
|
|
<a itemprop="url" aria-label="Go To Sub Footer Link: Tutorials" href="/blog/"><small>Tutorials</small></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="index-module--subfooter-links--WVwtv">
|
|
<small class="index-module--subfooter-label--PZVFY">About</small>
|
|
<ul>
|
|
<li class="index-module--footer-link--F2nJ6">
|
|
<a itemprop="url" aria-label="Go To Sub Footer Link: About me" href="/about/"><small>About me</small></a>
|
|
</li>
|
|
<li class="index-module--footer-link--F2nJ6">
|
|
<a itemprop="url" aria-label="Go To Sub Footer Link: How to work with me" href="/work-with-me/"><small>How to work with me</small></a>
|
|
</li>
|
|
<li class="index-module--footer-link--F2nJ6">
|
|
<a itemprop="url" aria-label="Go To Sub Footer Link: What I use" href="/about#what-i-use"><small>What I use</small></a>
|
|
</li>
|
|
<li class="index-module--footer-link--F2nJ6">
|
|
<a itemprop="url" aria-label="Go To Sub Footer Link: How to support me" href="/about#support-me"><small>How to support me</small></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="withBorder-module--top-border--wgBtX">
|
|
<div class="index-module--container--gInUu">
|
|
<small>© Robin Wieruch</small>
|
|
<ul class="index-module--social-icons--LkEsl">
|
|
<li class="index-module--social-icon--fGcO0">
|
|
<a href="https://twitter.com/rwieruch" target="_blank" rel="noopener noreferrer" aria-label="Go To Social Media: twitter-round"><svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewbox="0 0 49.652 49.652">
|
|
<path d="M24.826 0C11.137 0 0 11.137 0 24.826c0 13.688 11.137 24.826 24.826 24.826 13.688 0 24.826-11.138 24.826-24.826C49.652 11.137 38.516 0 24.826 0zm11.075 19.144c.011.246.017.494.017.742 0 7.551-5.746 16.255-16.259 16.255-3.227 0-6.231-.943-8.759-2.565.447.053.902.08 1.363.08 2.678 0 5.141-.914 7.097-2.446a5.72 5.72 0 01-5.338-3.969 5.76 5.76 0 002.58-.096 5.715 5.715 0 01-4.583-5.603l.001-.072a5.69 5.69 0 002.587.714 5.71 5.71 0 01-2.541-4.755c0-1.048.281-2.03.773-2.874a16.225 16.225 0 0011.777 5.972 5.707 5.707 0 01-.147-1.303 5.714 5.714 0 019.884-3.91 11.406 11.406 0 003.63-1.387 5.74 5.74 0 01-2.516 3.162 11.36 11.36 0 003.282-.899 11.494 11.494 0 01-2.848 2.954z"></path></svg></a>
|
|
</li>
|
|
<li class="index-module--social-icon--fGcO0">
|
|
<a href="https://www.github.com/rwieruch" target="_blank" rel="noopener noreferrer" aria-label="Go To Social Media: github-round"><svg height="30px" viewbox="0 0 438.549 438.549" width="30px" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289s4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136s11.704-.476 16.274-1.423c4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg></a>
|
|
</li>
|
|
<li class="index-module--social-icon--fGcO0">
|
|
<a href="https://www.facebook.com/rwieruch" target="_blank" rel="noopener noreferrer" aria-label="Go To Social Media: facebook-round"><svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewbox="0 0 97.75 97.75">
|
|
<path d="M48.875 0C21.882 0 0 21.882 0 48.875S21.882 97.75 48.875 97.75 97.75 75.868 97.75 48.875 75.868 0 48.875 0zm18.646 24.89l-6.76.003c-5.301 0-6.326 2.519-6.326 6.215v8.15h12.641l-.006 12.765H54.436v32.758H41.251V52.023H30.229V39.258h11.022v-9.414c0-10.925 6.675-16.875 16.42-16.875l9.851.015V24.89h-.001z"></path></svg></a>
|
|
</li>
|
|
<li class="index-module--social-icon--fGcO0">
|
|
<a href="mailto:hello@rwieruch.com" target="_blank" rel="noopener noreferrer" aria-label="Go To Social Media: email"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" height="30px" width="30px">
|
|
<path d="M507.49 101.721L352.211 256 507.49 410.279c2.807-5.867 4.51-12.353 4.51-19.279V121c0-6.927-1.703-13.412-4.51-19.279zM467 76H45c-6.927 0-13.412 1.703-19.279 4.51l198.463 197.463c17.548 17.548 46.084 17.548 63.632 0L486.279 80.51C480.412 77.703 473.927 76 467 76zM4.51 101.721C1.703 107.588 0 114.073 0 121v270c0 6.927 1.703 13.413 4.51 19.279L159.789 256 4.51 101.721z"></path>
|
|
<path d="M331 277.211l-21.973 21.973c-29.239 29.239-76.816 29.239-106.055 0L181 277.211 25.721 431.49C31.588 434.297 38.073 436 45 436h422c6.927 0 13.412-1.703 19.279-4.51L331 277.211z"></path></svg></a>
|
|
</li>
|
|
</ul>
|
|
<ul class="index-module--footer-links--x2kmN">
|
|
<li class="index-module--footer-link--VNu+7">
|
|
<a href="mailto:hello@rwieruch.com" target="_blank" rel="noopener noreferrer" aria-label="Go To Footer Link: Contact Me"><small>Contact Me</small></a>
|
|
</li>
|
|
<li class="index-module--footer-link--VNu+7">
|
|
<a itemprop="url" aria-label="Go To Footer Link: Privacy & Terms" href="/legal/"><small>Privacy & Terms</small></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<div id="gatsby-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0px; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"></div>
|
|
</div>
|
|
<script>
|
|
<![CDATA[
|
|
|
|
function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/',window[disableStr]=!0}var gaProperty='UA-65599459-2',disableStr='ga-disable-'+gaProperty;document.cookie.indexOf(disableStr+'=true')>-1&&(window[disableStr]=!0);
|
|
if(!(parseInt(navigator.doNotTrack) === 1 || parseInt(window.doNotTrack) === 1 || parseInt(navigator.msDoNotTrack) === 1 || navigator.doNotTrack === "yes")) {
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
}
|
|
if (typeof ga === "function") {
|
|
ga('create', 'UA-65599459-2', 'auto', {});
|
|
ga('set', 'anonymizeIp', true);
|
|
|
|
|
|
|
|
|
|
}
|
|
]]>
|
|
</script>
|
|
<script id="gatsby-script-loader">
|
|
/*<![CDATA[*/window.pagePath="/react-hooks-fetch-data/";window.___webpackCompilationHash="f6e958c5d5a378ec8c68";/*]]>*/
|
|
</script>
|
|
<script id="gatsby-chunk-mapping">
|
|
/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-02749fb02eba260fcd5b.js"],"app":["/app-0e9bc00158235a8f601c.js"],"component---src-pages-404-js":["/component---src-pages-404-js-e889687ceb66ea4f8265.js"],"component---src-pages-index-js":["/component---src-pages-index-js-00e8a5aa4fd286db6ef6.js"],"component---src-templates-blog-js":["/component---src-templates-blog-js-1679a5dd55b6984494cc.js"],"component---src-templates-category-js":["/component---src-templates-category-js-99b132c8060410924bc8.js"],"component---src-templates-post-js":["/component---src-templates-post-js-e5c139444506a074a639.js"]};/*]]>*/
|
|
</script>
|
|
<script src="/polyfill-02749fb02eba260fcd5b.js" nomodule=""></script>
|
|
<script src="/app-0e9bc00158235a8f601c.js" async="async"></script>
|
|
<script src="/framework-f76ff3626a6b1c9423cc.js" async="async"></script>
|
|
<script src="/webpack-runtime-9c0cee15c49b8585f07e.js" async="async"></script>
|
|
</body>
|
|
</html>
|