CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Learn to use useState hook, this very minute! | by Shivani Gupta | Frontend Weekly | Medium</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2021-06-21T12:13:53.951Z"/><meta data-rh="true" name="title" content="Learn to use useState hook, this very minute! | by Shivani Gupta | Frontend Weekly | Medium"/><meta data-rh="true" property="og:title" content="useState, this very minute!"/><meta data-rh="true" property="al:android:url" content="medium://p/a4c246316b98"/><meta data-rh="true" property="al:ios:url" content="medium://p/a4c246316b98"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="React team introduced React Hooks in October 2018 and finally released in React v16. 8.0 in February 2019. In the next release i.e. React v17 React team did not add any new features for developers…"/><meta data-rh="true" property="og:description" content="Most of us have already started working on hooks or in the process of switching to React hooks slowly. useState is one of the most ………."/><meta data-rh="true" property="og:url" content="https://medium.com/front-end-weekly/usestate-this-very-minute-a4c246316b98"/><meta data-rh="true" property="al:web:url" content="https://medium.com/front-end-weekly/usestate-this-very-minute-a4c246316b98"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*MRJexvmQRBJ2Jke0y7eyAg.png"/><meta data-rh="true" property="article:author" content="https://gshivani.medium.com"/><meta data-rh="true" name="author" content="Shivani Gupta"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="useState, this very minute!"/><meta data-rh="true" name="twitter:site" content="@frontendweekly1"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/a4c246316b98"/><meta data-rh="true" property="twitter:description" content="Most of us have already started working on hooks or in the process of switching to React hooks slowly. useState is one of the most ………."/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*MRJexvmQRBJ2Jke0y7eyAg.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="5 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://gshivani.medium.com"/><link data-rh="true" rel="canonical" href="https://medium.com/front-end-weekly/usestate-this-very-minute-a4c246316b98"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/a4c246316b98"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*MRJexvmQRBJ2Jke0y7eyAg.png"],"url":"https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fusestate-this-very-minute-a4c246316b98","dateCreated":"2021-05-26T06:33:19.796Z","datePublished":"2021-05-26T06:33:19.796Z","dateModified":"2022-05-10T17:07:07.056Z","headline":"Learn to use useState hook, this very minute! - Frontend Weekly - Medium","name":"Learn to use useState hook, this very minute! - Frontend Weekly - Medium","description":"React team introduced React Hooks in October 2018 and finally released in React v16. 8.0 in February 2019. In the next release i.e. React v17 React team did not add any new features for developers…","identifier":"a4c246316b98","author":{"@type":"Person","name":"Shivani Gupta","url":"https:\u002F\u002Fgshivani.medium.com"},"creator":["Shivani Gupta"],"publisher":{"@type":"Organization","name":"Frontend Weekly","url":"https:\u002F\u002Fmedium.com\u002Ffront-end-weekly","logo":{"@type":"ImageObject","width":163,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:326\u002F1*3tLiepV4wSXgEWj_LnUQvw.png"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fusestate-this-very-minute-a4c246316b98"}</script><style type="text/css" data-fela-rehydration="553" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="553" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:#1A8917}.es{border-color:#1A8917}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:#1A8917}.ez:disabled:hover{border-color:#1A8917}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.ia{align-items:baseline}.ib{width:48px}.ic{height:48px}.id{border:2px solid rgba(255, 255, 255, 1)}.ie{z-index:0}.if{box-shadow:none}.ig{border:1px solid rgba(0, 0, 0, 0.05)}.ih{margin-left:-12px}.ii{width:28px}.ij{height:28px}.ik{z-index:1}.il{width:24px}.im{margin-bottom:2px}.in{flex-wrap:nowrap}.io{font-size:16px}.ip{line-height:24px}.ir{margin:0 8px}.is{display:inline}.it{color:#1A8917}.iu{fill:#1A8917}.ix{flex:0 0 auto}.ja{flex-wrap:wrap}.jd{white-space:pre-wrap}.je{margin-right:4px}.jf{overflow:hidden}.jg{max-height:20px}.jh{text-overflow:ellipsis}.ji{display:-webkit-box}.jj{-webkit-line-clamp:1}.jk{-webkit-box-orient:vertical}.jl{word-break:break-all}.jn{padding-left:8px}.jo{padding-right:8px}.kp> *{flex-shrink:0}.kq{overflow-x:scroll}.kr::-webkit-scrollbar{display:none}.ks{scrollbar-width:none}.kt{-ms-overflow-style:none}.ku{width:74px}.kv{flex-direction:row}.kw{z-index:2}.kz{-webkit-user-select:none}.la{border:0}.lb{fill:rgba(117, 117, 117, 1)}.le{outline:0}.lf{user-select:none}.lg> svg{pointer-events:none}.lp{cursor:progress}.lq{margin-left:4px}.lr{margin-top:0px}.ls{opacity:1}.lt{padding:4px 0}.lw{width:16px}.ly{display:inline-flex}.me{max-width:100%}.mf{padding:8px 2px}.mg svg{color:#6B6B6B}.mx{line-height:1.58}.my{letter-spacing:-0.004em}.mz{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.nu{margin-bottom:-0.46em}.nv{margin-left:auto}.nw{margin-right:auto}.nx{max-width:1348px}.od{clear:both}.of{cursor:zoom-in}.og{z-index:auto}.oi{height:auto}.oj{margin-top:10px}.ok{max-width:728px}.on{text-decoration:underline}.oo{background:none}.op{margin-top:32px}.oq{margin-bottom:14px}.or{padding-top:24px}.os{padding-bottom:10px}.ot{background-color:#000000}.ou{height:3px}.ov{width:3px}.ow{margin-right:20px}.ox{padding:2px 4px}.oy{font-size:75%}.oz> strong{font-family:inherit}.pa{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.pb{max-width:1800px}.pc{list-style-type:disc}.pd{margin-left:30px}.pe{padding-left:0px}.pk{margin:auto}.pl{padding-bottom:50%}.pm{height:0}.pn{padding-bottom:100%}.po{margin-bottom:26px}.pp{margin-top:6px}.pq{margin-top:8px}.pr{margin-right:8px}.ps{padding:8px 16px}.pt{border-radius:100px}.pu{transition:background 300ms ease}.pw{white-space:nowrap}.px{border-top:none}.py{height:52px}.pz{max-height:52px}.qa{box-sizing:content-box}.qb{position:static}.qd{max-width:155px}.qo{height:0px}.qp{margin-bottom:40px}.qq{margin-bottom:48px}.re{border-radius:2px}.rg{height:64px}.rh{width:64px}.ri{align-self:flex-end}.rj{flex:1 1 auto}.rp{padding-right:4px}.rq{font-weight:500}.sd{margin-top:16px}.se{color:rgba(255, 255, 255, 1)}.sf{fill:rgba(255, 255, 255, 1)}.sg{background:rgba(25, 25, 25, 1)}.sh{border-color:rgba(25, 25, 25, 1)}.sk:disabled{opacity:0.1}.sl:disabled:hover{background:rgba(25, 25, 25, 1)}.sm:disabled:hover{border-color:rgba(25, 25, 25, 1)}.tk{gap:18px}.tl{fill:rgba(61, 61, 61, 1)}.tn{fill:#242424}.to{background:0}.tp{border-color:#242424}.tq:disabled:hover{color:#242424}.tr:disabled:hover{fill:#242424}.ts:disabled:hover{border-color:#242424}.ud{border-bottom:solid 1px #E5E5E5}.ue{margin-top:72px}.uf{padding:24px 0}.ug{margin-bottom:0px}.uh{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:#156D12}.eu:hover{border-color:#156D12}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.iq:hover{text-decoration:underline}.iv:hover:not(:disabled){color:#156D12}.iw:hover:not(:disabled){fill:#156D12}.ld:hover{fill:rgba(8, 8, 8, 1)}.lu:hover{fill:#000000}.lv:hover p{color:#000000}.lx:hover{color:#000000}.mh:hover svg{color:#000000}.pv:hover{background-color:#F2F2F2}.rf:hover{background-color:none}.si:hover{background:#000000}.sj:hover{border-color:#242424}.tm:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.lc:focus{fill:rgba(8, 8, 8, 1)}.mi:focus svg{color:#000000}.oh:focus{transform:scale(1.01)}.lh:active{border-style:none}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:68px}.gc{max-width:680px}.hq{font-size:42px}.hr{margin-top:1.19em}.hs{margin-bottom:32px}.ht{line-height:52px}.hu{letter-spacing:-0.011em}.hz{align-items:center}.kb{border-top:solid 1px #F2F2F2}.kc{border-bottom:solid 1px #F2F2F2}.kd{margin:32px 0 0}.ke{padding:3px 8px}.kn> *{margin-right:24px}.ko> :last-child{margin-right:0}.lo{margin-top:0px}.md{margin:0}.nq{font-size:20px}.nr{margin-top:2.14em}.ns{line-height:32px}.nt{letter-spacing:-0.003em}.oc{margin-top:56px}.pj{margin-top:1.14em}.qi{display:inline-block}.qn{margin-bottom:104px}.qr{flex-direction:row}.qu{margin-bottom:0}.qv{margin-right:20px}.rk{max-width:500px}.sb{line-height:24px}.sc{letter-spacing:0}.sr{margin-bottom:88px}.su{margin-bottom:72px}.th{font-size:24px}.ti{line-height:30px}.tj{letter-spacing:-0.016em}.tx{width:min-width}.uc{padding-top:72px}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.ln{margin-top:0px}.ol{margin-left:auto}.om{text-align:center}.qh{display:inline-block}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lm{margin-top:0px}.qg{display:inline-block}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lk{margin-top:0px}.ll{margin-right:0px}.qf{display:inline-block}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{margin-bottom:24px}.gz{line-height:38px}.ha{letter-spacing:-0.014em}.hv{align-items:flex-start}.iy{flex-direction:column}.jb{margin-bottom:2px}.jp{margin:24px -24px 0}.jq{padding:0}.kf> *{margin-right:8px}.kg> :last-child{margin-right:24px}.kx{margin-left:0px}.li{margin-top:0px}.lj{margin-right:0px}.lz{margin:0}.mj{border:1px solid #F2F2F2}.mk{border-radius:99em}.ml{padding:0px 16px 0px 12px}.mm{height:38px}.mn{align-items:center}.mp svg{margin-right:8px}.na{font-size:18px}.nb{margin-top:1.56em}.nc{line-height:28px}.nd{letter-spacing:-0.003em}.ny{margin-top:40px}.pf{margin-top:1.34em}.qe{display:inline-block}.qj{margin-bottom:96px}.rc{margin-bottom:20px}.rd{margin-right:0}.ro{max-width:100%}.rr{font-size:24px}.rs{line-height:30px}.rt{letter-spacing:-0.016em}.sn{margin-bottom:64px}.sv{font-size:20px}.sw{line-height:24px}.sx{letter-spacing:0}.tt{width:100%}.ty{padding-top:48px}.mo:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hl{font-size:42px}.hm{margin-top:1.19em}.hn{margin-bottom:32px}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.hy{align-items:center}.jx{border-top:solid 1px #F2F2F2}.jy{border-bottom:solid 1px #F2F2F2}.jz{margin:32px 0 0}.ka{padding:3px 8px}.kl> *{margin-right:24px}.km> :last-child{margin-right:0}.mc{margin:0}.nm{font-size:20px}.nn{margin-top:2.14em}.no{line-height:32px}.np{letter-spacing:-0.003em}.ob{margin-top:56px}.pi{margin-top:1.14em}.qm{margin-bottom:104px}.qs{flex-direction:row}.qw{margin-bottom:0}.qx{margin-right:20px}.rl{max-width:500px}.rz{line-height:24px}.sa{letter-spacing:0}.sq{margin-bottom:88px}.st{margin-bottom:72px}.te{font-size:24px}.tf{line-height:30px}.tg{letter-spacing:-0.016em}.tw{width:min-width}.ub{padding-top:72px}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:68px}.ga{max-width:680px}.hg{font-size:42px}.hh{margin-top:1.19em}.hi{margin-bottom:32px}.hj{line-height:52px}.hk{letter-spacing:-0.011em}.hx{align-items:center}.jt{border-top:solid 1px #F2F2F2}.ju{border-bottom:solid 1px #F2F2F2}.jv{margin:32px 0 0}.jw{padding:3px 8px}.kj> *{margin-right:24px}.kk> :last-child{margin-right:0}.mb{margin:0}.ni{font-size:20px}.nj{margin-top:2.14em}.nk{line-height:32px}.nl{letter-spacing:-0.003em}.oa{margin-top:56px}.ph{margin-top:1.14em}.ql{margin-bottom:104px}.qt{flex-direction:row}.qy{margin-bottom:0}.qz{margin-right:20px}.rm{max-width:500px}.rx{line-height:24px}.ry{letter-spacing:0}.sp{margin-bottom:88px}.ss{margin-bottom:72px}.tb{font-size:24px}.tc{line-height:30px}.td{letter-spacing:-0.016em}.tv{width:min-width}.ua{padding-top:72px}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:4px}.hb{font-size:32px}.hc{margin-top:1.01em}.hd{margin-bottom:24px}.he{line-height:38px}.hf{letter-spacing:-0.014em}.hw{align-items:flex-start}.iz{flex-direction:column}.jc{margin-bottom:2px}.jr{margin:24px 0 0}.js{padding:0}.kh> *{margin-right:8px}.ki> :last-child{margin-right:8px}.ky{margin-left:0px}.ma{margin:0}.mq{border:1px solid #F2F2F2}.mr{border-radius:99em}.ms{padding:0px 16px 0px 12px}.mt{height:38px}.mu{align-items:center}.mw svg{margin-right:8px}.ne{font-size:18px}.nf{margin-top:1.56em}.ng{line-height:28px}.nh{letter-spacing:-0.003em}.nz{margin-top:40px}.pg{margin-top:1.34em}.qk{margin-bottom:96px}.ra{margin-bottom:20px}.rb{margin-right:0}.rn{max-width:100%}.ru{font-size:24px}.rv{line-height:30px}.rw{letter-spacing:-0.016em}.so{margin-bottom:64px}.sy{font-size:20px}.sz{line-height:24px}.ta{letter-spacing:0}.tu{width:100%}.tz{padding-top:48px}.mv:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="print">.qc{display:none}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jm{max-height:none}</style><style type="text/css" data-fela-rehydration="553" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.oe{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Fa4c246316b98&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav----------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&source=post_page---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" rel="noopener follow" href="/?source=---top_nav_layout_nav----------------------------------"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" rel="noopener follow" href="/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav-----------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" rel="noopener follow" href="/search?source=---top_nav_layout_nav----------------------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&source=post_page---top_nav_layout_nav-----------------------global_nav-----------">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="a088" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht hu bk" data-testid="storyTitle">Learn to use useState hook, <strong class="al">this very minute!</strong></h1><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="hv hw hx hy hz ab"><div><div class="ab ia"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@gshivani?source=post_page---byline--a4c246316b98--------------------------------"><div class="l ib ic by id ie"><div class="l fj"><img alt="Shivani Gupta" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="if by l dd de fs n ig ft"></div></div></div></a></div></div><div class="ih ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/front-end-weekly?source=post_page---byline--a4c246316b98--------------------------------" rel="noopener follow"><div class="l ii ij by id ik"><div class="l fj"><img alt="Frontend Weekly" class="l fd by br il cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*NDFydnWKD8c58PA36XKRKg.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="if by l br il fs n ig ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="im ab q"><div class="ab q in"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b io ip bk"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" data-testid="authorName" rel="noopener follow" href="/@gshivani?source=post_page---byline--a4c246316b98--------------------------------">Shivani Gupta</a></p></div></div></div><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b io ip du"><span><a class="it iu ah ai aj ak al am an ao ap aq ar ex iv iw" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Ffda018b60e78&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&user=Shivani+Gupta&userId=fda018b60e78&source=post_page-fda018b60e78--byline--a4c246316b98---------------------post_header-----------">Follow</a></span></p></div></div></span></div></div><div class="l ix"><span class="bf b bg z du"><div class="ab cn iy iz ja"><div class="jb jc ab"><div class="bf b bg z du ab jd"><span class="je l ix">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar iq ab q" data-testid="publicationName" href="https://medium.com/front-end-weekly?source=post_page---byline--a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b bg z jf jg jh ji jj jk jl jm bk">Frontend Weekly</p></a></div></div></div><div class="h k"><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">5 min read</span><div class="jn jo l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">May 26, 2021</span></div></span></div></span></div></div></div><div class="ab cp jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke"><div class="h k w fg fh q"><div class="ku l"><div class="ab q kv kw"><div class="pw-multi-vote-icon fj je kx ky kz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Ffront-end-weekly%2Fa4c246316b98&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&user=Shivani+Gupta&userId=fda018b60e78&source=---header_actions--a4c246316b98---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="la ao lb lc ld le am lf lg lh kz"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l li lj lk ll lm ln lo"><p class="bf b dv z du"><span class="lp">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao la ls lt ab q fk lu lv" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lr"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count lq lr">2</span></p></button></div></div></div><div class="ab q kf kg kh ki kj kk kl km kn ko kp kq kr ks kt"><div class="lw k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fa4c246316b98&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&source=---header_actions--a4c246316b98---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lx" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd ly cn"><div class="l ae"><div class="ab cb"><div class="lz ma mb mc md me ci bh"><div class="ab"><div class="bm bh" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al mf an ao ap ex mg mh lv mi mj mk ml mm s mn mo mp mq mr ms mt u mu mv mw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al mf an ao ap ex mg mh lv mi mj mk ml mm s mn mo mp mq mr ms mt u mu mv mw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="0d3a" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">React</strong> team introduced <strong class="mz gv">React Hooks</strong> in October 2018 and finally released in <strong class="mz gv">React</strong> v16. 8.0 in February 2019. In the next release i.e. <strong class="mz gv">React</strong> v17 React team did not add any new features for developers and focused on making it easier to upgrade React itself.</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw nx"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*MRJexvmQRBJ2Jke0y7eyAg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*MRJexvmQRBJ2Jke0y7eyAg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*MRJexvmQRBJ2Jke0y7eyAg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*MRJexvmQRBJ2Jke0y7eyAg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*MRJexvmQRBJ2Jke0y7eyAg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*MRJexvmQRBJ2Jke0y7eyAg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*MRJexvmQRBJ2Jke0y7eyAg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*MRJexvmQRBJ2Jke0y7eyAg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*MRJexvmQRBJ2Jke0y7eyAg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*MRJexvmQRBJ2Jke0y7eyAg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*MRJexvmQRBJ2Jke0y7eyAg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*MRJexvmQRBJ2Jke0y7eyAg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*MRJexvmQRBJ2Jke0y7eyAg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*MRJexvmQRBJ2Jke0y7eyAg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="463" loading="eager" role="presentation"/></picture></div></div><figcaption class="oj ff ok nv nw ol om bf b bg z du"><a class="af on" href="https://undraw.co/search" rel="noopener ugc nofollow" target="_blank">Source</a></figcaption></figure><p id="ebc4" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk">Most of us have already started working on hooks or in the process of switching to React hooks slowly. We are using latest tech stack and <strong class="mz gv">React Hooks</strong> for most of the projects in <span class="is"><span class="is" aria-hidden="false"><a class="oo it fe" href="https://medium.com/u/aeff3791c135?source=post_page---user_mention--a4c246316b98--------------------------------" rel="noopener" target="_blank">InMobi</a></span></span>. If you are curious to know what we are building at InMobi/<a class="af on" href="https://www.glance.com/" rel="noopener ugc nofollow" target="_blank">glance</a> or anything related to tech, feel free to ping me. useState is one of the most important and widely used Hooks while developing functional component in R<strong class="mz gv">eact.</strong> To put your curiosity at ease, I am going to show you few ways to use useState, this very minute! But before we jump onto usestate, there are few things you must be aware of for better understanding of useState. Let’s get started. 😄</p></div></div></div><div class="ab cb op oq or os" role="separator"><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="b2ce" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">What is State?</strong><br/><strong class="mz gv">State</strong> stores component’s data and enables component to keep track of changes. A state can have <strong class="mz gv">business</strong> data, <strong class="mz gv">communication</strong> data to show error or success messages, <strong class="mz gv">control</strong> data like forms, <strong class="mz gv">session</strong> data related to user/user permission and <strong class="mz gv">location</strong> data like url path, history etc. <br/>Use state only when data is dynamic and expected to be changed between renders.</p><p id="0213" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">What is Hook? <br/></strong>As we are moving from class based components to function based component, React Hooks helps us to use state in functional Components. We are not going to deep dive into Hooks. Let’s concentrate on useState.</p><p id="7e73" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">What is useState?<br/></strong><code class="cx ox oy oz pa b">useState</code> allows us to add state to functional components. Start with importing useState Hook from React.</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*fCIYPZ6s4pfW4rGqhTL_Kg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="76" loading="eager" role="presentation"/></picture></div></div></figure><ul class=""><li id="03e2" class="mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu pc pd pe bk"><strong class="mz gv">stateIdentifier:</strong> Access state with this identifier name in component.</li><li id="576a" class="mx my gu mz b na pf nc nd ne pg ng nh ni ph nk nl nm pi no np nq pj ns nt nu pc pd pe bk"><strong class="mz gv">updateStateFunction: </strong>This function allows you to update the state.</li><li id="9541" class="mx my gu mz b na pf nc nd ne pg ng nh ni ph nk nl nm pi no np nq pj ns nt nu pc pd pe bk"><strong class="mz gv">initialState: </strong>Assign initial state to state identifier. The initial value will be assigned only on the initial render.</li></ul><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*47g6gzlo0Of_2VM7EnOEew.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*47g6gzlo0Of_2VM7EnOEew.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*47g6gzlo0Of_2VM7EnOEew.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*47g6gzlo0Of_2VM7EnOEew.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*47g6gzlo0Of_2VM7EnOEew.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*47g6gzlo0Of_2VM7EnOEew.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*47g6gzlo0Of_2VM7EnOEew.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*47g6gzlo0Of_2VM7EnOEew.png 640w, https://miro.medium.com/v2/resize:fit:720/1*47g6gzlo0Of_2VM7EnOEew.png 720w, https://miro.medium.com/v2/resize:fit:750/1*47g6gzlo0Of_2VM7EnOEew.png 750w, https://miro.medium.com/v2/resize:fit:786/1*47g6gzlo0Of_2VM7EnOEew.png 786w, https://miro.medium.com/v2/resize:fit:828/1*47g6gzlo0Of_2VM7EnOEew.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*47g6gzlo0Of_2VM7EnOEew.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*47g6gzlo0Of_2VM7EnOEew.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="76" loading="lazy" role="presentation"/></picture></div></div></figure><p id="511b" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk">✍️ You can use <code class="cx ox oy oz pa b">useState </code>as many times as you want to create different states. Do you ever wonder why I am using <code class="cx ox oy oz pa b">const</code> and not <code class="cx ox oy oz pa b">let</code>? There is no restriction and you can use either let or const. I prefer const as I don’t want to share its name with a function or a variable in the same scope to mitigate error. You can follow the rules of const and let when declaring your state to determine if you should use let or const. Front tooling is very sophisticated and errors can be caught at development time with linters so you don’t have to worry if you have used same name by mistake.</p><figure class="ny nz oa ob oc od"><div class="pk jf l fj"><div class="pl pm l"></div></div></figure></div></div></div><div class="ab cb op oq or os" role="separator"><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="bb89" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">1.Basic initialization: </strong>Each piece of state holds a single value, which can be an object, an array, a boolean, or any other type you can imagine. Let me show you few examples of <code class="cx ox oy oz pa b">useState</code>.</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*68EPNUDB8-6pKNE1dpHNdA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*68EPNUDB8-6pKNE1dpHNdA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*68EPNUDB8-6pKNE1dpHNdA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*68EPNUDB8-6pKNE1dpHNdA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*68EPNUDB8-6pKNE1dpHNdA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*68EPNUDB8-6pKNE1dpHNdA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*68EPNUDB8-6pKNE1dpHNdA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*68EPNUDB8-6pKNE1dpHNdA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*68EPNUDB8-6pKNE1dpHNdA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*68EPNUDB8-6pKNE1dpHNdA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*68EPNUDB8-6pKNE1dpHNdA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*68EPNUDB8-6pKNE1dpHNdA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*68EPNUDB8-6pKNE1dpHNdA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*68EPNUDB8-6pKNE1dpHNdA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="165" loading="eager" role="presentation"/></picture></div></div></figure><p id="e07a" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">2.Optional chaining : </strong>ES2020 introduced the optional chaining operator denoted by the question mark followed by a dot. The operator implicitly checks if the data is not <code class="cx ox oy oz pa b">null</code> or <code class="cx ox oy oz pa b">undefined</code> before attempting to access the data.User . If <code class="cx ox oy oz pa b">data.user</code> is <code class="cx ox oy oz pa b">undefined</code>, <code class="cx ox oy oz pa b">data.user.name</code> fails with an error but <code class="cx ox oy oz pa b">data?.user?.name</code> will return undefined. Pretty cool!😎</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*BGaOhGE9uscs5Bwzz7nP0g.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*BGaOhGE9uscs5Bwzz7nP0g.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*BGaOhGE9uscs5Bwzz7nP0g.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*BGaOhGE9uscs5Bwzz7nP0g.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*BGaOhGE9uscs5Bwzz7nP0g.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*BGaOhGE9uscs5Bwzz7nP0g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*BGaOhGE9uscs5Bwzz7nP0g.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*BGaOhGE9uscs5Bwzz7nP0g.png 640w, https://miro.medium.com/v2/resize:fit:720/1*BGaOhGE9uscs5Bwzz7nP0g.png 720w, https://miro.medium.com/v2/resize:fit:750/1*BGaOhGE9uscs5Bwzz7nP0g.png 750w, https://miro.medium.com/v2/resize:fit:786/1*BGaOhGE9uscs5Bwzz7nP0g.png 786w, https://miro.medium.com/v2/resize:fit:828/1*BGaOhGE9uscs5Bwzz7nP0g.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*BGaOhGE9uscs5Bwzz7nP0g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*BGaOhGE9uscs5Bwzz7nP0g.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="76" loading="lazy" role="presentation"/></picture></div></div></figure><p id="55a0" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">3. Spread operator: </strong>Spread operator<strong class="mz gv"> </strong>can be used to<strong class="mz gv"> </strong>copy properties from a provided object onto a new object. One use case of this feature could be to make default value assignments. We want to merge initial values and default value into one and create <code class="cx ox oy oz pa b">userDetails</code> state.</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*DuFxo1yE6U01WnllCuOWlQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*DuFxo1yE6U01WnllCuOWlQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*DuFxo1yE6U01WnllCuOWlQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*DuFxo1yE6U01WnllCuOWlQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*DuFxo1yE6U01WnllCuOWlQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*DuFxo1yE6U01WnllCuOWlQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*DuFxo1yE6U01WnllCuOWlQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*DuFxo1yE6U01WnllCuOWlQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*DuFxo1yE6U01WnllCuOWlQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*DuFxo1yE6U01WnllCuOWlQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*DuFxo1yE6U01WnllCuOWlQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*DuFxo1yE6U01WnllCuOWlQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*DuFxo1yE6U01WnllCuOWlQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*DuFxo1yE6U01WnllCuOWlQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="255" loading="lazy" role="presentation"/></picture></div></div></figure><p id="d295" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">4. Function: </strong>We can initialise the state by making use of function. Here I am going to call function getUserDetails to fetch initial value for user details through REST API and create new state userDetails. Notice that I am using arrow function to execute getUserDetails. We want the function to be executed only once at the time of initial render. Read more about it on <a class="af on" href="https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates" rel="noopener ugc nofollow" target="_blank">blog by Kent.</a></p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*n-mQM0vJb-illjArEBpCQQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*n-mQM0vJb-illjArEBpCQQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*n-mQM0vJb-illjArEBpCQQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*n-mQM0vJb-illjArEBpCQQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*n-mQM0vJb-illjArEBpCQQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*n-mQM0vJb-illjArEBpCQQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*n-mQM0vJb-illjArEBpCQQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*n-mQM0vJb-illjArEBpCQQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*n-mQM0vJb-illjArEBpCQQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*n-mQM0vJb-illjArEBpCQQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*n-mQM0vJb-illjArEBpCQQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*n-mQM0vJb-illjArEBpCQQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*n-mQM0vJb-illjArEBpCQQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*n-mQM0vJb-illjArEBpCQQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="76" loading="lazy" role="presentation"/></picture></div></div></figure><p id="491c" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">5. Date Objects:</strong> We can initialize date state variable to the current date and time using Date object.</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*48T2mgByEL8jWH4a76w4Ow.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*48T2mgByEL8jWH4a76w4Ow.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*48T2mgByEL8jWH4a76w4Ow.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*48T2mgByEL8jWH4a76w4Ow.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*48T2mgByEL8jWH4a76w4Ow.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*48T2mgByEL8jWH4a76w4Ow.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*48T2mgByEL8jWH4a76w4Ow.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*48T2mgByEL8jWH4a76w4Ow.png 640w, https://miro.medium.com/v2/resize:fit:720/1*48T2mgByEL8jWH4a76w4Ow.png 720w, https://miro.medium.com/v2/resize:fit:750/1*48T2mgByEL8jWH4a76w4Ow.png 750w, https://miro.medium.com/v2/resize:fit:786/1*48T2mgByEL8jWH4a76w4Ow.png 786w, https://miro.medium.com/v2/resize:fit:828/1*48T2mgByEL8jWH4a76w4Ow.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*48T2mgByEL8jWH4a76w4Ow.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*48T2mgByEL8jWH4a76w4Ow.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="76" loading="lazy" role="presentation"/></picture></div></div></figure><p id="81e6" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">6. Object.keys: </strong>Let’s see an example of how to set radioVal state using Object.keys method.</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*QrUmWWjnLOL5U54cwL4fsQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*QrUmWWjnLOL5U54cwL4fsQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*QrUmWWjnLOL5U54cwL4fsQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*QrUmWWjnLOL5U54cwL4fsQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*QrUmWWjnLOL5U54cwL4fsQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*QrUmWWjnLOL5U54cwL4fsQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*QrUmWWjnLOL5U54cwL4fsQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*QrUmWWjnLOL5U54cwL4fsQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*QrUmWWjnLOL5U54cwL4fsQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*QrUmWWjnLOL5U54cwL4fsQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*QrUmWWjnLOL5U54cwL4fsQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*QrUmWWjnLOL5U54cwL4fsQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*QrUmWWjnLOL5U54cwL4fsQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*QrUmWWjnLOL5U54cwL4fsQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="165" loading="lazy" role="presentation"/></picture></div></div></figure><p id="3d39" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk"><strong class="mz gv">7. Few more examples: </strong>We can set initial payload in payload state for pagination API and few more examples.</p><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*iHBfcT41VQJU1GPaqjA9qA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*iHBfcT41VQJU1GPaqjA9qA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*iHBfcT41VQJU1GPaqjA9qA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*iHBfcT41VQJU1GPaqjA9qA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*iHBfcT41VQJU1GPaqjA9qA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*iHBfcT41VQJU1GPaqjA9qA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*iHBfcT41VQJU1GPaqjA9qA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*iHBfcT41VQJU1GPaqjA9qA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*iHBfcT41VQJU1GPaqjA9qA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*iHBfcT41VQJU1GPaqjA9qA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*iHBfcT41VQJU1GPaqjA9qA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*iHBfcT41VQJU1GPaqjA9qA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*iHBfcT41VQJU1GPaqjA9qA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*iHBfcT41VQJU1GPaqjA9qA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="165" loading="lazy" role="presentation"/></picture></div></div></figure><figure class="ny nz oa ob oc od nv nw paragraph-image"><div role="button" tabindex="0" class="oe of fj og bh oh"><div class="nv nw pb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*aGnqsYwUZb7XUPjuIWMvaQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*aGnqsYwUZb7XUPjuIWMvaQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*aGnqsYwUZb7XUPjuIWMvaQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*aGnqsYwUZb7XUPjuIWMvaQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*aGnqsYwUZb7XUPjuIWMvaQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*aGnqsYwUZb7XUPjuIWMvaQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*aGnqsYwUZb7XUPjuIWMvaQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*aGnqsYwUZb7XUPjuIWMvaQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*aGnqsYwUZb7XUPjuIWMvaQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*aGnqsYwUZb7XUPjuIWMvaQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*aGnqsYwUZb7XUPjuIWMvaQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*aGnqsYwUZb7XUPjuIWMvaQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*aGnqsYwUZb7XUPjuIWMvaQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*aGnqsYwUZb7XUPjuIWMvaQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh me oi c" width="700" height="94" loading="lazy" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb op oq or os" role="separator"><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><figure class="ny nz oa ob oc od"><div class="pk jf l fj"><div class="pn pm l"></div></div><figcaption class="oj ff ok nv nw ol om bf b bg z du"><a class="af on" href="https://lottiefiles.com/58560-work-from-home-chill" rel="noopener ugc nofollow" target="_blank">Source</a></figcaption></figure><p id="84b8" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk">Learning never ends for developers. <strong class="mz gv">Front End</strong> is one of the most complex environments to work when you have plenty of libraries and frameworks to learn for development, keeping up with frontend tooling, and the vast range of devices to support during development, it has gotten way bigger than imagined. 🌐</p></div></div></div><div class="ab cb op oq or os" role="separator"><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov ow"></span><span class="ot by bm ou ov"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="466b" class="pw-post-body-paragraph mx my gu mz b na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu gn bk">Thank you for reading this article. If you have enjoyed it, please feel free to click the 👏 button to help others find it .<br/><strong class="mz gv">References</strong>: <a class="af on" href="http://jamesknelson.com/5-types-react-application-state/" rel="noopener ugc nofollow" target="_blank">http://jamesknelson.com/5-types-react-application-state/</a> , <a class="af on" href="https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/" rel="noopener ugc nofollow" target="_blank">https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/</a></p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="po pp ab ja"><div class="pq ab"><a class="pr ay am ao" rel="noopener follow" href="/tag/react?source=post_page-----a4c246316b98--------------------------------"><div class="ps fj cx pt ge pu pv bf b bg z bk pw">React</div></a></div><div class="pq ab"><a class="pr ay am ao" rel="noopener follow" href="/tag/javascript?source=post_page-----a4c246316b98--------------------------------"><div class="ps fj cx pt ge pu pv bf b bg z bk pw">JavaScript</div></a></div><div class="pq ab"><a class="pr ay am ao" rel="noopener follow" href="/tag/web?source=post_page-----a4c246316b98--------------------------------"><div class="ps fj cx pt ge pu pv bf b bg z bk pw">Web</div></a></div><div class="pq ab"><a class="pr ay am ao" rel="noopener follow" href="/tag/front-end-development?source=post_page-----a4c246316b98--------------------------------"><div class="ps fj cx pt ge pu pv bf b bg z bk pw">Front End Development</div></a></div><div class="pq ab"><a class="pr ay am ao" rel="noopener follow" href="/tag/web-development?source=post_page-----a4c246316b98--------------------------------"><div class="ps fj cx pt ge pu pv bf b bg z bk pw">Web Development</div></a></div></div></div></div><div class="l"></div><footer class="px oq py pz qa ab q qb ik c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp qc"><div class="ab q kv"><div class="qd l"><span class="l qe qf qg e d"><div class="ab q kv kw"><div class="pw-multi-vote-icon fj je kx ky kz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Ffront-end-weekly%2Fa4c246316b98&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&user=Shivani+Gupta&userId=fda018b60e78&source=---footer_actions--a4c246316b98---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="la ao lb lc ld le am lf lg lh kz"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l li lj lk ll lm ln lo"><p class="bf b dv z du"><span class="lp">--</span></p></div></div></span><span class="l h g f qh qi"><div class="ab q kv kw"><div class="pw-multi-vote-icon fj je kx ky kz"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Ffront-end-weekly%2Fa4c246316b98&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&user=Shivani+Gupta&userId=fda018b60e78&source=---footer_actions--a4c246316b98---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="la ao lb lc ld le am lf lg lh kz"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l li lj lk ll lm ln lo"><p class="bf b dv z du"><span class="lp">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao la ls lt ab q fk lu lv" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lr"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count lq lr">2</span></p></button></div></div></div></div><div class="ab q"><div class="ow l ix"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fa4c246316b98&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ffront-end-weekly%2Fusestate-this-very-minute-a4c246316b98&source=---footer_actions--a4c246316b98---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lx" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="ow l ix"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al mf an ao ap ex mg mh lv mi"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="qj qk ql qm qn l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qo bh r qp"></div><div class="qq l"><div class="ab qr qs qt iz iy"><div class="qu qv qw qx qy qz ra rb rc rd ab cp"><div class="h k"><a href="https://medium.com/front-end-weekly?source=post_page---post_publication_info--a4c246316b98--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Frontend Weekly" class="re ib ic cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*NDFydnWKD8c58PA36XKRKg.png" width="48" height="48" loading="lazy"/><div class="re l ic ib fs n fr rf"></div></div></a></div><div class="j i d"><a href="https://medium.com/front-end-weekly?source=post_page---post_publication_info--a4c246316b98--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Frontend Weekly" class="re rh rg cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*NDFydnWKD8c58PA36XKRKg.png" width="64" height="64" loading="lazy"/><div class="re l rg rh fs n fr rf"></div></div></a></div><div class="j i d ri ix"><div class="ab"></div></div></div><div class="ab co rj"><div class="rk rl rm rn ro l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/front-end-weekly?source=post_page---post_publication_info--a4c246316b98--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf rq rr rs rt ru rv rw ni rx ry nm rz sa nq sb sc bk"><span class="gn rp">Published in <!-- -->Frontend Weekly</span></h2></a><div class="pq ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/front-end-weekly/followers?source=post_page---post_publication_info--a4c246316b98--------------------------------">27K Followers</a></span></div><div class="bf b bg z du ab jd"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/front-end-weekly/react-js-best-practices-for-beginners-a-comprehensive-guide-f9db4b62df9b?source=post_page---post_publication_info--a4c246316b98--------------------------------">Last published <span>Nov 20, 2024</span></a></div></div><div class="sd l"><p class="bf b bg z bk">It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at <a class="af ag ah ai aj ak al am an ao ap aq ar on go" href="http://frontendweekly.co" rel="noopener ugc nofollow">http://frontendweekly.co</a></p></div></div></div><div class="h k"><div class="ab"></div></div></div></div><div class="ab qr qs qt iz iy"><div class="qu qv qw qx qy qz ra rb rc rd ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@gshivani?source=post_page---post_author_info--a4c246316b98--------------------------------"><div class="l fj"><img alt="Shivani Gupta" class="l fd by ic ib cx" src="https://miro.medium.com/v2/resize:fill:96:96/2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l ic ib fs n ay rf"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@gshivani?source=post_page---post_author_info--a4c246316b98--------------------------------"><div class="l fj"><img alt="Shivani Gupta" class="l fd by rg rh cx" src="https://miro.medium.com/v2/resize:fill:128:128/2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l rg rh fs n ay rf"></div></div></a></div><div class="j i d ri ix"><div class="ab"><span><button class="bf b bg z se ps sf sg sh si sj ev ew sk sl sm fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co rj"><div class="rk rl rm rn ro l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@gshivani?source=post_page---post_author_info--a4c246316b98--------------------------------"><h2 class="pw-author-name bf rq rr rs rt ru rv rw ni rx ry nm rz sa nq sb sc bk"><span class="gn rp">Written by <!-- -->Shivani Gupta</span></h2></a><div class="pq ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@gshivani/followers?source=post_page---post_author_info--a4c246316b98--------------------------------">157 Followers</a></span></div><div class="bf b bg z du ab jd"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@gshivani/following?source=post_page---post_author_info--a4c246316b98--------------------------------">106 Following</a></div></div><div class="sd l"><p class="bf b bg z bk"><span class="gn">I’m a Front-End Developer based in Bangalore, India. I believe in pretty designs and clean coding.</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z se ps sf sg sh si sj ev ew sk sl sm fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div><div class="sn so sp sq sr l"><div class="qo bh r sn so ss st su"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf rq sv sw sx sy sz ta tb tc td te tf tg th ti tj bk">Responses (<!-- -->2<!-- -->)</h2><div class="ab tk"><div><div class="bm" aria-hidden="false"><a class="tl tm" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--a4c246316b98--------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="op l"><button class="bf b bg z bk ps tn to tp lx lu sj ev ew ex tq tr ts fa tt tu tv tw tx fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="ty tz ua ub uc l bx"><div class="h k j"><div class="qo bh ud ue"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="uf ab kv ja"><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/about?autoplay=1&source=post_page-----a4c246316b98--------------------------------"><p class="bf b dv z du">About</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----a4c246316b98--------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="ug uh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----a4c246316b98--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="ug l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/business?source=post_page-----a4c246316b98--------------------------------"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20241202-120250-b4d476f058"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCachePosts","post-a4c246316b98","user-fda018b60e78","collection-c539d790d38a"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"b8c83ff3-2377-4ed4-94f9-e11bdd60b2b7","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-e605f00edb8121590b5c77402feade55-08f4b69a1ac5ed61-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fusestate-this-very-minute-a4c246316b98","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20241202-120250-b4d476f058","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20241202-120250-b4d476f058","commit":"b4d476f05843111baca5a9be048d4d77758064af"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"front-end-weekly\"})":{"__ref":"Collection:c539d790d38a"},"postResult({\"id\":\"a4c246316b98\"})":{"__ref":"Post:a4c246316b98"}},"ImageMetadata:":{"__typename":"ImageMetadata","id":""},"Collection:c539d790d38a":{"__typename":"Collection","id":"c539d790d38a","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":{"__ref":"CustomStyleSheet:df9eb197ec26"},"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFFFFFFF","point":0},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.1},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.2},{"__typename":"ColorPoint","color":"#FFD1E7D1","point":0.6},{"__typename":"ColorPoint","color":"#FFA3D0A2","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF1A8917","point":0},{"__typename":"ColorPoint","color":"#FF11800E","point":0.1},{"__typename":"ColorPoint","color":"#FF0F730C","point":0.2},{"__typename":"ColorPoint","color":"#FF095407","point":1}]},"tintBackgroundSpectrum":null},"domain":null,"slug":"front-end-weekly","googleAnalyticsId":null,"editors":[{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:3dad5916cd29"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:f83613f5d8cf"}}],"name":"Frontend Weekly","avatar":{"__ref":"ImageMetadata:1*NDFydnWKD8c58PA36XKRKg.png"},"description":"It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http:\u002F\u002Ffrontendweekly.co","subscriberCount":27368,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:f9db4b62df9b"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:c539d790d38a-viewerId:lo_5b5bf8896035"},"twitterUsername":"frontendweekly1","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*3tLiepV4wSXgEWj_LnUQvw.png"}},"CustomStyleSheet:df9eb197ec26":{"__typename":"CustomStyleSheet","id":"df9eb197ec26","global":{"__typename":"GlobalStyles","colorPalette":null,"fonts":{"__typename":"StyleSheetFonts","font1":{"__typename":"StyleSheetFont","name":"SANS_SERIF_1"},"font2":{"__typename":"StyleSheetFont","name":"SANS_SERIF_1"},"font3":{"__typename":"StyleSheetFont","name":"SERIF_2"}}},"header":{"__typename":"HeaderStyles","backgroundImage":null}},"User:3dad5916cd29":{"__typename":"User","id":"3dad5916cd29"},"User:f83613f5d8cf":{"__typename":"User","id":"f83613f5d8cf"},"ImageMetadata:1*NDFydnWKD8c58PA36XKRKg.png":{"__typename":"ImageMetadata","id":"1*NDFydnWKD8c58PA36XKRKg.png"},"User:f4d55b37846f":{"__typename":"User","id":"f4d55b37846f","customDomainState":null,"hasSubdomain":false,"username":"mustafamulla765"},"Post:f9db4b62df9b":{"__typename":"Post","id":"f9db4b62df9b","firstPublishedAt":1732136746189,"creator":{"__ref":"User:f4d55b37846f"},"collection":{"__ref":"Collection:c539d790d38a"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Freact-js-best-practices-for-beginners-a-comprehensive-guide-f9db4b62df9b","sequence":null,"uniqueSlug":"react-js-best-practices-for-beginners-a-comprehensive-guide-f9db4b62df9b"},"LinkedAccounts:fda018b60e78":{"__typename":"LinkedAccounts","mastodon":null,"id":"fda018b60e78"},"UserViewerEdge:userId:fda018b60e78-viewerId:lo_5b5bf8896035":{"__typename":"UserViewerEdge","id":"userId:fda018b60e78-viewerId:lo_5b5bf8896035","isFollowing":false,"isUser":false,"isMuting":false},"NewsletterV3:788e26056fcc":{"__typename":"NewsletterV3","id":"788e26056fcc","type":"NEWSLETTER_TYPE_AUTHOR","slug":"fda018b60e78","name":"fda018b60e78","collection":null,"user":{"__ref":"User:fda018b60e78"}},"User:fda018b60e78":{"__typename":"User","id":"fda018b60e78","name":"Shivani Gupta","username":"gshivani","newsletterV3":{"__ref":"NewsletterV3:788e26056fcc"},"linkedAccounts":{"__ref":"LinkedAccounts:fda018b60e78"},"isSuspended":false,"imageId":"2*7Vr4JCeuKrF9jDy9_YEIqQ.jpeg","mediumMemberAt":0,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":157,"followingCount":88,"collectionFollowingCount":18},"customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"gshivani.medium.com"}},"hasSubdomain":true,"bio":"I’m a Front-End Developer based in Bangalore, India. I believe in pretty designs and clean coding.","isPartnerProgramEnrolled":false,"viewerEdge":{"__ref":"UserViewerEdge:userId:fda018b60e78-viewerId:lo_5b5bf8896035"},"viewerIsUser":false,"postSubscribeMembershipUpsellShownAt":0,"membership":null,"allowNotes":true,"twitterScreenName":""},"Topic:63c6f1f93ee":{"__typename":"Topic","slug":"javascript","id":"63c6f1f93ee","name":"Javascript"},"Paragraph:d919e1dc3282_0":{"__typename":"Paragraph","id":"d919e1dc3282_0","name":"a088","type":"H3","href":null,"layout":null,"metadata":null,"text":"Learn to use useState hook, this very minute!","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":28,"end":45,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_1":{"__typename":"Paragraph","id":"d919e1dc3282_1","name":"0d3a","type":"P","href":null,"layout":null,"metadata":null,"text":"React team introduced React Hooks in October 2018 and finally released in React v16. 8.0 in February 2019. In the next release i.e. React v17 React team did not add any new features for developers and focused on making it easier to upgrade React itself.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":5,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":22,"end":33,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":74,"end":79,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":132,"end":137,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*MRJexvmQRBJ2Jke0y7eyAg.png":{"__typename":"ImageMetadata","id":"1*MRJexvmQRBJ2Jke0y7eyAg.png","originalHeight":891,"originalWidth":1348,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_2":{"__typename":"Paragraph","id":"d919e1dc3282_2","name":"25e0","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*MRJexvmQRBJ2Jke0y7eyAg.png"},"text":"Source","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":6,"href":"https:\u002F\u002Fundraw.co\u002Fsearch","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_3":{"__typename":"Paragraph","id":"d919e1dc3282_3","name":"ebc4","type":"P","href":null,"layout":null,"metadata":null,"text":"Most of us have already started working on hooks or in the process of switching to React hooks slowly. We are using latest tech stack and React Hooks for most of the projects in InMobi. If you are curious to know what we are building at InMobi\u002Fglance or anything related to tech, feel free to ping me. useState is one of the most important and widely used Hooks while developing functional component in React. To put your curiosity at ease, I am going to show you few ways to use useState, this very minute! But before we jump onto usestate, there are few things you must be aware of for better understanding of useState. Let’s get started. 😄","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":178,"end":184,"href":"","anchorType":"USER","userId":"aeff3791c135","linkMetadata":null},{"__typename":"Markup","type":"A","start":244,"end":250,"href":"https:\u002F\u002Fwww.glance.com\u002F","anchorType":"LINK","userId":"","linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":138,"end":149,"href":"","anchorType":"LINK","userId":"","linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":404,"end":409,"href":"","anchorType":"LINK","userId":"","linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_4":{"__typename":"Paragraph","id":"d919e1dc3282_4","name":"b2ce","type":"P","href":null,"layout":null,"metadata":null,"text":"What is State?\nState stores component’s data and enables component to keep track of changes. A state can have business data, communication data to show error or success messages, control data like forms, session data related to user\u002Fuser permission and location data like url path, history etc. \nUse state only when data is dynamic and expected to be changed between renders.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":14,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":15,"end":20,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":110,"end":118,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":125,"end":138,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":179,"end":186,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":204,"end":211,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":253,"end":261,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_5":{"__typename":"Paragraph","id":"d919e1dc3282_5","name":"0213","type":"P","href":null,"layout":null,"metadata":null,"text":"What is Hook? \nAs we are moving from class based components to function based component, React Hooks helps us to use state in functional Components. We are not going to deep dive into Hooks. Let’s concentrate on useState.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":15,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_6":{"__typename":"Paragraph","id":"d919e1dc3282_6","name":"7e73","type":"P","href":null,"layout":null,"metadata":null,"text":"What is useState?\nuseState allows us to add state to functional components. Start with importing useState Hook from React.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":18,"end":26,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":18,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*fCIYPZ6s4pfW4rGqhTL_Kg.png":{"__typename":"ImageMetadata","id":"1*fCIYPZ6s4pfW4rGqhTL_Kg.png","originalHeight":194,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_7":{"__typename":"Paragraph","id":"d919e1dc3282_7","name":"2869","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*fCIYPZ6s4pfW4rGqhTL_Kg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_8":{"__typename":"Paragraph","id":"d919e1dc3282_8","name":"03e2","type":"ULI","href":null,"layout":null,"metadata":null,"text":"stateIdentifier: Access state with this identifier name in component.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":16,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_9":{"__typename":"Paragraph","id":"d919e1dc3282_9","name":"576a","type":"ULI","href":null,"layout":null,"metadata":null,"text":"updateStateFunction: This function allows you to update the state.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":21,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_10":{"__typename":"Paragraph","id":"d919e1dc3282_10","name":"9541","type":"ULI","href":null,"layout":null,"metadata":null,"text":"initialState: Assign initial state to state identifier. The initial value will be assigned only on the initial render.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":14,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*47g6gzlo0Of_2VM7EnOEew.png":{"__typename":"ImageMetadata","id":"1*47g6gzlo0Of_2VM7EnOEew.png","originalHeight":194,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_11":{"__typename":"Paragraph","id":"d919e1dc3282_11","name":"9a92","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*47g6gzlo0Of_2VM7EnOEew.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_12":{"__typename":"Paragraph","id":"d919e1dc3282_12","name":"511b","type":"P","href":null,"layout":null,"metadata":null,"text":"✍️ You can use useState as many times as you want to create different states. Do you ever wonder why I am using const and not let? There is no restriction and you can use either let or const. I prefer const as I don’t want to share its name with a function or a variable in the same scope to mitigate error. You can follow the rules of const and let when declaring your state to determine if you should use let or const. Front tooling is very sophisticated and errors can be caught at development time with linters so you don’t have to worry if you have used same name by mistake.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":15,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":112,"end":117,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":126,"end":129,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:18214d8333adbb5668f31791a3202b60":{"__typename":"MediaResource","id":"18214d8333adbb5668f31791a3202b60","iframeSrc":"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fupscri.be%2Ff%2F788447%3Fas_embed%3Dtrue&dntp=1&display_name=Upscribe&url=https%3A%2F%2Fupscri.be%2F788447%2F&type=text%2Fhtml&schema=upscri","iframeHeight":400,"iframeWidth":800,"title":"Join 30K+ Developers and Stay on Top of Frontend Development"},"Paragraph:d919e1dc3282_13":{"__typename":"Paragraph","id":"d919e1dc3282_13","name":"9dc5","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:18214d8333adbb5668f31791a3202b60"}},"mixtapeMetadata":null},"Paragraph:d919e1dc3282_14":{"__typename":"Paragraph","id":"d919e1dc3282_14","name":"bb89","type":"P","href":null,"layout":null,"metadata":null,"text":"1.Basic initialization: Each piece of state holds a single value, which can be an object, an array, a boolean, or any other type you can imagine. Let me show you few examples of useState.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":178,"end":186,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*68EPNUDB8-6pKNE1dpHNdA.png":{"__typename":"ImageMetadata","id":"1*68EPNUDB8-6pKNE1dpHNdA.png","originalHeight":424,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_15":{"__typename":"Paragraph","id":"d919e1dc3282_15","name":"0fd7","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*68EPNUDB8-6pKNE1dpHNdA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_16":{"__typename":"Paragraph","id":"d919e1dc3282_16","name":"e07a","type":"P","href":null,"layout":null,"metadata":null,"text":"2.Optional chaining : ES2020 introduced the optional chaining operator denoted by the question mark followed by a dot. The operator implicitly checks if the data is not null or undefined before attempting to access the data.User . If data.user is undefined, data.user.name fails with an error but data?.user?.name will return undefined. Pretty cool!😎","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":169,"end":173,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":177,"end":186,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":234,"end":243,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":247,"end":256,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":258,"end":272,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":297,"end":313,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":22,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*BGaOhGE9uscs5Bwzz7nP0g.png":{"__typename":"ImageMetadata","id":"1*BGaOhGE9uscs5Bwzz7nP0g.png","originalHeight":194,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_17":{"__typename":"Paragraph","id":"d919e1dc3282_17","name":"3e0f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*BGaOhGE9uscs5Bwzz7nP0g.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_18":{"__typename":"Paragraph","id":"d919e1dc3282_18","name":"55a0","type":"P","href":null,"layout":null,"metadata":null,"text":"3. Spread operator: Spread operator can be used to copy properties from a provided object onto a new object. One use case of this feature could be to make default value assignments. We want to merge initial values and default value into one and create userDetails state.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":252,"end":263,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":20,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":35,"end":36,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":50,"end":51,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*DuFxo1yE6U01WnllCuOWlQ.png":{"__typename":"ImageMetadata","id":"1*DuFxo1yE6U01WnllCuOWlQ.png","originalHeight":654,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_19":{"__typename":"Paragraph","id":"d919e1dc3282_19","name":"8294","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*DuFxo1yE6U01WnllCuOWlQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_20":{"__typename":"Paragraph","id":"d919e1dc3282_20","name":"d295","type":"P","href":null,"layout":null,"metadata":null,"text":"4. Function: We can initialise the state by making use of function. Here I am going to call function getUserDetails to fetch initial value for user details through REST API and create new state userDetails. Notice that I am using arrow function to execute getUserDetails. We want the function to be executed only once at the time of initial render. Read more about it on blog by Kent.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":371,"end":384,"href":"https:\u002F\u002Fkentcdodds.com\u002Fblog\u002Fuse-state-lazy-initialization-and-function-updates","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":13,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*n-mQM0vJb-illjArEBpCQQ.png":{"__typename":"ImageMetadata","id":"1*n-mQM0vJb-illjArEBpCQQ.png","originalHeight":194,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_21":{"__typename":"Paragraph","id":"d919e1dc3282_21","name":"af74","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*n-mQM0vJb-illjArEBpCQQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_22":{"__typename":"Paragraph","id":"d919e1dc3282_22","name":"491c","type":"P","href":null,"layout":null,"metadata":null,"text":"5. Date Objects: We can initialize date state variable to the current date and time using Date object.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":16,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*48T2mgByEL8jWH4a76w4Ow.png":{"__typename":"ImageMetadata","id":"1*48T2mgByEL8jWH4a76w4Ow.png","originalHeight":194,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_23":{"__typename":"Paragraph","id":"d919e1dc3282_23","name":"9f47","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*48T2mgByEL8jWH4a76w4Ow.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_24":{"__typename":"Paragraph","id":"d919e1dc3282_24","name":"81e6","type":"P","href":null,"layout":null,"metadata":null,"text":"6. Object.keys: Let’s see an example of how to set radioVal state using Object.keys method.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":16,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*QrUmWWjnLOL5U54cwL4fsQ.png":{"__typename":"ImageMetadata","id":"1*QrUmWWjnLOL5U54cwL4fsQ.png","originalHeight":424,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_25":{"__typename":"Paragraph","id":"d919e1dc3282_25","name":"bfc9","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*QrUmWWjnLOL5U54cwL4fsQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_26":{"__typename":"Paragraph","id":"d919e1dc3282_26","name":"3d39","type":"P","href":null,"layout":null,"metadata":null,"text":"7. Few more examples: We can set initial payload in payload state for pagination API and few more examples.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":22,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*iHBfcT41VQJU1GPaqjA9qA.png":{"__typename":"ImageMetadata","id":"1*iHBfcT41VQJU1GPaqjA9qA.png","originalHeight":424,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_27":{"__typename":"Paragraph","id":"d919e1dc3282_27","name":"71d9","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*iHBfcT41VQJU1GPaqjA9qA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*aGnqsYwUZb7XUPjuIWMvaQ.png":{"__typename":"ImageMetadata","id":"1*aGnqsYwUZb7XUPjuIWMvaQ.png","originalHeight":240,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:d919e1dc3282_28":{"__typename":"Paragraph","id":"d919e1dc3282_28","name":"8c31","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*aGnqsYwUZb7XUPjuIWMvaQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:db8b18698c82d26c32ed062749d7ca5d":{"__typename":"MediaResource","id":"db8b18698c82d26c32ed062749d7ca5d","iframeSrc":"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fembed.lottiefiles.com%2Fanimation%2F58560&display_name=Lottiefiles&url=https%3A%2F%2Flottiefiles.com%2F58560-work-from-home-chill&image=https%3A%2F%2Fassets.lottiefiles.com%2Fcustom_og%2Flf20_yq3qqjh7.png&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=lottiefiles","iframeHeight":300,"iframeWidth":300,"title":"Work From Home - Chill"},"Paragraph:d919e1dc3282_29":{"__typename":"Paragraph","id":"d919e1dc3282_29","name":"2a31","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"Source","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":6,"href":"https:\u002F\u002Flottiefiles.com\u002F58560-work-from-home-chill","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:db8b18698c82d26c32ed062749d7ca5d"}},"mixtapeMetadata":null},"Paragraph:d919e1dc3282_30":{"__typename":"Paragraph","id":"d919e1dc3282_30","name":"84b8","type":"P","href":null,"layout":null,"metadata":null,"text":"Learning never ends for developers. Front End is one of the most complex environments to work when you have plenty of libraries and frameworks to learn for development, keeping up with frontend tooling, and the vast range of devices to support during development, it has gotten way bigger than imagined. 🌐","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":36,"end":45,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:d919e1dc3282_31":{"__typename":"Paragraph","id":"d919e1dc3282_31","name":"466b","type":"P","href":null,"layout":null,"metadata":null,"text":"Thank you for reading this article. If you have enjoyed it, please feel free to click the 👏 button to help others find it .\nReferences: http:\u002F\u002Fjamesknelson.com\u002F5-types-react-application-state\u002F , https:\u002F\u002Fblog.logrocket.com\u002Fa-guide-to-usestate-in-react-ecb9952e406c\u002F","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":137,"end":193,"href":"http:\u002F\u002Fjamesknelson.com\u002F5-types-react-application-state\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":196,"end":265,"href":"https:\u002F\u002Fblog.logrocket.com\u002Fa-guide-to-usestate-in-react-ecb9952e406c\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":125,"end":135,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:c539d790d38a-viewerId:lo_5b5bf8896035":{"__typename":"CollectionViewerEdge","id":"collectionId:c539d790d38a-viewerId:lo_5b5bf8896035","isEditor":false,"isMuting":false},"ImageMetadata:1*3tLiepV4wSXgEWj_LnUQvw.png":{"__typename":"ImageMetadata","id":"1*3tLiepV4wSXgEWj_LnUQvw.png","originalWidth":1516,"originalHeight":556},"PostViewerEdge:postId:a4c246316b98-viewerId:lo_5b5bf8896035":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:a4c246316b98-viewerId:lo_5b5bf8896035"},"Tag:react":{"__typename":"Tag","id":"react","displayTitle":"React","normalizedTagSlug":"react"},"Tag:javascript":{"__typename":"Tag","id":"javascript","displayTitle":"JavaScript","normalizedTagSlug":"javascript"},"Tag:web":{"__typename":"Tag","id":"web","displayTitle":"Web","normalizedTagSlug":"web"},"Tag:front-end-development":{"__typename":"Tag","id":"front-end-development","displayTitle":"Front End Development","normalizedTagSlug":"front-end-development"},"Tag:web-development":{"__typename":"Tag","id":"web-development","displayTitle":"Web Development","normalizedTagSlug":"web-development"},"Post:a4c246316b98":{"__typename":"Post","id":"a4c246316b98","collection":{"__ref":"Collection:c539d790d38a"},"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"9a75","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"6cec","startIndex":4,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"8bd7","startIndex":14,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"ca48","startIndex":29,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"bc15","startIndex":31,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:d919e1dc3282_0"},{"__ref":"Paragraph:d919e1dc3282_1"},{"__ref":"Paragraph:d919e1dc3282_2"},{"__ref":"Paragraph:d919e1dc3282_3"},{"__ref":"Paragraph:d919e1dc3282_4"},{"__ref":"Paragraph:d919e1dc3282_5"},{"__ref":"Paragraph:d919e1dc3282_6"},{"__ref":"Paragraph:d919e1dc3282_7"},{"__ref":"Paragraph:d919e1dc3282_8"},{"__ref":"Paragraph:d919e1dc3282_9"},{"__ref":"Paragraph:d919e1dc3282_10"},{"__ref":"Paragraph:d919e1dc3282_11"},{"__ref":"Paragraph:d919e1dc3282_12"},{"__ref":"Paragraph:d919e1dc3282_13"},{"__ref":"Paragraph:d919e1dc3282_14"},{"__ref":"Paragraph:d919e1dc3282_15"},{"__ref":"Paragraph:d919e1dc3282_16"},{"__ref":"Paragraph:d919e1dc3282_17"},{"__ref":"Paragraph:d919e1dc3282_18"},{"__ref":"Paragraph:d919e1dc3282_19"},{"__ref":"Paragraph:d919e1dc3282_20"},{"__ref":"Paragraph:d919e1dc3282_21"},{"__ref":"Paragraph:d919e1dc3282_22"},{"__ref":"Paragraph:d919e1dc3282_23"},{"__ref":"Paragraph:d919e1dc3282_24"},{"__ref":"Paragraph:d919e1dc3282_25"},{"__ref":"Paragraph:d919e1dc3282_26"},{"__ref":"Paragraph:d919e1dc3282_27"},{"__ref":"Paragraph:d919e1dc3282_28"},{"__ref":"Paragraph:d919e1dc3282_29"},{"__ref":"Paragraph:d919e1dc3282_30"},{"__ref":"Paragraph:d919e1dc3282_31"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:fda018b60e78"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fusestate-this-very-minute-a4c246316b98","primaryTopic":{"__ref":"Topic:63c6f1f93ee"},"topics":[{"__typename":"Topic","slug":"javascript"}],"isPublished":true,"latestPublishedVersion":"d919e1dc3282","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":2},"clapCount":228,"allowResponses":true,"isLimitedState":false,"title":"useState, this very minute!","isSeries":false,"sequence":null,"uniqueSlug":"usestate-this-very-minute-a4c246316b98","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1624277633951,"readingTime":4.254716981132075,"previewContent":{"__typename":"PreviewContent","subtitle":"Most of us have already started working on hooks or in the process of switching to React hooks slowly. useState is one of the most ………."},"previewImage":{"__ref":"ImageMetadata:1*MRJexvmQRBJ2Jke0y7eyAg.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1622010799796,"updatedAt":1652202427056,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:a4c246316b98-viewerId:lo_5b5bf8896035"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:react"},{"__ref":"Tag:javascript"},{"__ref":"Tag:web"},{"__ref":"Tag:front-end-development"},{"__ref":"Tag:web-development"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":783,"layerCake":3,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"MISS"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.96244f47.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.071d0479.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4810.6318add7.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5787.e66a3a4d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7549.2176f21f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6589.7c500280.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3735.afb7e926.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.0a97706a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.cd03f950.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.bf599bc5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.902ad94b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.6565ad5f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.a0afad8a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.36c2ecf4.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8ebbf43b08713dea',t:'MTczMzE0OTE4OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>