var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var B=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),F=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of A(e))!C.call(n,s)&&s!==r&&o(n,s,{get:()=>e[s],enumerable:!(c=y(e,s))||c.enumerable});return n};var m=(n,e,r)=>(r=n!=null?h(D(n)):{},t(e||!n||!n.__esModule?o(r,"default",{value:n,enumerable:!0}):r,n)),u=n=>t(o({},"__esModule",{value:!0}),n);var i=B((S,a)=>{a.exports=_jsx_runtime});var g={};F(g,{default:()=>p,frontmatter:()=>b});var l=m(i()),b={title:"How to type the setState function from the useState hook",date:"2022-04-14",tags:["ReactJS","TypeScript","Snippets"],draft:!1,author:"Ilkin Mammadov",summary:"A deep dive into how to properly type a setState function from the useState hook."};function d(n){let e={code:"code",div:"div",figure:"figure",p:"p",pre:"pre",span:"span",...n.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:"Imagine you have a component with a number state, and you pass the same state into another component for it you be used:"}),` `,(0,l.jsx)(e.div,{className:"remark-code-title",children:"Sample.tsx"}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#96D0FF"},children:" 'react'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Snippets } "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#96D0FF"},children:" './snippets'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#DCBDFB"},children:" Sample"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setNumber"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">("}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Snippets"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" number"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" setNumber"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setNumber"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),` `,(0,l.jsx)(e.p,{children:"What should the SnippetsProps interface look like?"}),` `,(0,l.jsx)(e.p,{children:"Most people will type something like this:"}),` `,(0,l.jsx)(e.div,{className:"remark-code-title",children:"Snippets.tsx"}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Dispatch, SetStateAction } "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#96D0FF"},children:" 'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"interface"}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" SnippetsProps"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" number"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" number"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" setNumber"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" Dispatch"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:"SetStateAction"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">>"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#DCBDFB"},children:" Snippets"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:"setNumber"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" SnippetsProps"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#8DDB8C"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">Clicked "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" times"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#8DDB8C"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"() "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#DCBDFB"},children:" setNumber"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(number "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">Click me"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),` `,(0,l.jsxs)(e.p,{children:["But it bothers me to have to import ",(0,l.jsx)(e.code,{children:"Dispatch"})," and ",(0,l.jsx)(e.code,{children:"SetStateAction"})," from react just to be able to define the interface."]}),` `,(0,l.jsxs)(e.p,{children:["The type ",(0,l.jsx)(e.code,{children:"Dispatch>"})," here is basically a function that accepts whatever type you declared your state is, in this case, its a number."]}),` `,(0,l.jsx)(e.p,{children:"So basically you can also do this here:"}),` `,(0,l.jsx)(e.div,{className:"remark-code-title",children:"Snippets.tsx"}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"interface"}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" SnippetsProps"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" number"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" number"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DCBDFB"},children:" setNumber"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:"v"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" number"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" void"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#DCBDFB"},children:" Snippets"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:"setNumber"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F69D50"},children:" SnippetsProps"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#8DDB8C"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">Clicked "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" times"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#8DDB8C"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"() "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#DCBDFB"},children:" setNumber"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(number "}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#6CB6FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:">Click me"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),` `,(0,l.jsx)(e.p,{children:"We just saved two imports just by declaring it as a function that accepts a number, and returns nothing."}),` `,(0,l.jsx)(e.p,{children:"I know its just a small detail but I really believe it makes the code look cleaner."}),` `,(0,l.jsx)(e.p,{children:"This is just one of my pet peeves, but at the end of the day, it really depends on the coding standard that you or your company follows."}),` `,(0,l.jsx)(e.p,{children:"Hope you like one of my first blogs, will try to make more soon!"})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(d,{...n})}):d(n)}return u(g);})(); ;return Component;

All Posts