{"id":143,"date":"2026-08-20T07:00:46","date_gmt":"2026-08-20T07:00:46","guid":{"rendered":"https:\/\/kishor10d.com\/blogs\/?p=143"},"modified":"2026-08-18T06:37:57","modified_gmt":"2026-08-18T06:37:57","slug":"usestate-vs-usereducer-react","status":"publish","type":"post","link":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/","title":{"rendered":"useState vs useReducer: Choosing the Right State Hook"},"content":{"rendered":"<p><code>useState<\/code> and <code><a href=\"https:\/\/react.dev\/reference\/react\/useReducer\" target=\"_blank\" rel=\"noopener\">useReducer<\/a><\/code> both do the same fundamental job: they let a component hold state that persists between renders and trigger a re-render when that state changes. But they represent two different philosophies for <em>how<\/em> state should be updated, and picking the wrong one for a given component can leave you either over-engineering a simple toggle or fighting a tangle of related state variables that drift out of sync with each other.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-144 size-large\" src=\"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-1024x572.png\" alt=\"useState vs useReducer update flow diagram\" width=\"843\" height=\"471\" srcset=\"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-1024x572.png 1024w, https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-300x168.png 300w, https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-768x429.png 768w, https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-1536x858.png 1536w, https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-2048x1144.png 2048w\" sizes=\"auto, (max-width: 843px) 100vw, 843px\" \/><\/p>\n<h2>useState: Direct and Simple<\/h2>\n<p><code>useState<\/code> gives you a piece of state and a setter function. You call the setter with a new value, and React re-renders with that value in place.<\/p>\n<pre><code class=\"language-jsx\">const [count, setCount] = useState(0);\r\n\r\nfunction increment() {\r\n  setCount(count + 1);\r\n}\r\n<\/code><\/pre>\n<p>This is the right tool when a piece of state is independent, and updates to it don&#8217;t need to know about other pieces of state. A boolean toggle, a text input&#8217;s value, a selected tab index \u2014 these are all naturally <code>useState<\/code> territory. The update logic is simple enough to write inline, right where the event happens.<\/p>\n<h2>useReducer: Centralized and Predictable<\/h2>\n<p><code>useReducer<\/code> separates the <em>what happened<\/em> from the <em>how state changes<\/em>. Instead of calling a setter directly, you dispatch an action \u2014 a plain object describing an event \u2014 and a reducer function decides how that action transforms the current state into the next state.<\/p>\n<pre><code class=\"language-jsx\">function reducer(state, action) {\r\n  switch (action.type) {\r\n    case 'increment':\r\n      return { count: state.count + 1 };\r\n    case 'decrement':\r\n      return { count: state.count - 1 };\r\n    case 'reset':\r\n      return { count: 0 };\r\n    default:\r\n      return state;\r\n  }\r\n}\r\n\r\nconst [state, dispatch] = useReducer(reducer, { count: 0 });\r\n\r\ndispatch({ type: 'increment' });\r\n<\/code><\/pre>\n<p>Notice what changed: the component no longer contains the update logic itself. It just describes <em>what happened<\/em> (&#8216;increment&#8217;) and lets the reducer decide what that means for the state. This separation is the whole point of <code>useReducer<\/code>.<\/p>\n<h2>Why This Separation Matters<\/h2>\n<p>The value of <code>useReducer<\/code> becomes clear once your state has more than one moving part that need to change together, consistently, no matter where in the component the update is triggered from.<\/p>\n<p>Consider a form with several fields, validation state, and a submission status. With <code>useState<\/code>, you&#8217;d likely end up with five or six separate state variables, and any event that needs to touch more than one of them (submitting the form should set <code>isSubmitting<\/code> to true <em>and<\/em> clear <code>errors<\/code> <em>and<\/em> increment <code>submitCount<\/code>) has to remember to update all of them together, every time, in every handler that does this. Miss one in a new handler six months from now, and you have a subtle bug.<\/p>\n<p>With <code>useReducer<\/code>, that logic lives in exactly one place \u2014 the reducer \u2014 and every part of the component that wants to trigger this compound update just dispatches a single action:<\/p>\n<pre><code class=\"language-jsx\">function reducer(state, action) {\r\n  switch (action.type) {\r\n    case 'submit_start':\r\n      return { ...state, isSubmitting: true, errors: {}, submitCount: state.submitCount + 1 };\r\n    case 'submit_success':\r\n      return { ...state, isSubmitting: false };\r\n    case 'submit_error':\r\n      return { ...state, isSubmitting: false, errors: action.errors };\r\n    default:\r\n      return state;\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>No matter how many places in the component dispatch <code>'submit_start'<\/code>, the resulting state transition is always identical, because it&#8217;s defined once. That consistency is difficult to guarantee with several independent <code>useState<\/code> calls scattered through the same component.<\/p>\n<h2>The Trade-off: Boilerplate vs Guarantees<\/h2>\n<p><code>useReducer<\/code> isn&#8217;t free. It requires you to define action types, write a reducer function, and dispatch objects instead of just calling a setter. For a single counter or a toggle, that&#8217;s meaningfully more code to express the same behavior:<\/p>\n<pre><code class=\"language-jsx\">\/\/ useState: 1 line\r\nconst [isOpen, setIsOpen] = useState(false);\r\n\r\n\/\/ useReducer: several lines for the same result\r\nfunction reducer(state, action) {\r\n  switch (action.type) {\r\n    case 'toggle': return !state;\r\n    default: return state;\r\n  }\r\n}\r\nconst [isOpen, dispatch] = useReducer(reducer, false);\r\n<\/code><\/pre>\n<p>For simple, independent state, this extra structure buys you nothing \u2014 it&#8217;s pure overhead. That&#8217;s why reaching for <code>useReducer<\/code> by default, even for trivial state, tends to make components harder to read rather than easier.<\/p>\n<h2>A Simple Decision Rule<\/h2>\n<p>Ask: <strong>does an update to this state ever need to depend on, or affect, other state at the same time?<\/strong><\/p>\n<ul>\n<li>If each piece of state changes independently, with no coordination needed \u2014 use <code>useState<\/code>. Most component state fits here.<\/li>\n<li>If several values need to update together consistently, or the next state depends on complex logic involving the previous state \u2014 use <code>useReducer<\/code>. Forms, wizards, multi-step flows, and any state machine-like behavior are the classic cases.<\/li>\n<\/ul>\n<p>A useful signal: if you find yourself calling multiple <code>setX<\/code> functions back-to-back inside a single event handler, especially if you do that in more than one handler, that&#8217;s usually a sign the state belongs in a reducer instead.<\/p>\n<h2>They&#8217;re Not Mutually Exclusive<\/h2>\n<p>It&#8217;s common, and often correct, to use both in the same component. A component might use <code>useReducer<\/code> for a complex piece of coordinated state (like a multi-step form) while using <code>useState<\/code> for something unrelated and simple (like whether a tooltip is currently visible). Neither hook is &#8220;better&#8221; globally \u2014 they&#8217;re suited to different shapes of state within the same component.<\/p>\n<h2>Quick Reference<\/h2>\n<table>\n<thead>\n<tr>\n<th><\/th>\n<th><code>useState<\/code><\/th>\n<th><code>useReducer<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Update style<\/td>\n<td>Call a setter directly<\/td>\n<td>Dispatch an action, reducer computes next state<\/td>\n<\/tr>\n<tr>\n<td>Best for<\/td>\n<td>Independent, simple values<\/td>\n<td>Coordinated state, complex transitions<\/td>\n<\/tr>\n<tr>\n<td>Boilerplate<\/td>\n<td>Minimal<\/td>\n<td>More upfront (action types, reducer function)<\/td>\n<\/tr>\n<tr>\n<td>Predictability<\/td>\n<td>Update logic can end up scattered across handlers<\/td>\n<td>Update logic centralized in one function<\/td>\n<\/tr>\n<tr>\n<td>Classic use case<\/td>\n<td>Toggles, inputs, simple counters<\/td>\n<td>Forms, wizards, state machines<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>The Takeaway<\/h2>\n<p><code>useState<\/code> and <code>useReducer<\/code> aren&#8217;t a beginner-vs-advanced pair \u2014 they&#8217;re suited to different shapes of state. <code>useState<\/code> keeps simple, independent values simple. <code>useReducer<\/code> keeps complex, coordinated state consistent by centralizing the update logic in one place instead of scattering it across handlers. The question isn&#8217;t which hook is more powerful \u2014 it&#8217;s whether your state&#8217;s next value depends only on itself, or on a rule that needs to be applied the same way everywhere it&#8217;s triggered.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>useState and useReducer both do the same fundamental job: they let a component hold state that persists between renders and trigger a re-render when that&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[10],"tags":[140,120,135,136,139,138,137],"class_list":["post-143","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-frontend-development","tag-javascript","tag-react","tag-react-hooks","tag-state-management","tag-usereducer","tag-usestate"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>useState vs useReducer in React: When to Use Which<\/title>\n<meta name=\"description\" content=\"useState vs useReducer \u2014 learn the real difference, when independent state calls for useState, and when coordinated updates call for useReducer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"useState vs useReducer in React: When to Use Which\" \/>\n<meta property=\"og:description\" content=\"useState vs useReducer \u2014 learn the real difference, when independent state calls for useState, and when coordinated updates call for useReducer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Practical Kishor\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-20T07:00:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1431\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/#\\\/schema\\\/person\\\/682d05c56912dd235403d4d49862750a\"},\"headline\":\"useState vs useReducer: Choosing the Right State Hook\",\"datePublished\":\"2026-08-20T07:00:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/\"},\"wordCount\":818,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/#\\\/schema\\\/person\\\/682d05c56912dd235403d4d49862750a\"},\"image\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/usestate_vs_usereducer_header-1024x572.png\",\"keywords\":[\"frontend development\",\"JavaScript\",\"react\",\"react hooks\",\"state management\",\"usereducer\",\"usestate\"],\"articleSection\":[\"ReactJS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/\",\"url\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/\",\"name\":\"useState vs useReducer in React: When to Use Which\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/usestate_vs_usereducer_header-1024x572.png\",\"datePublished\":\"2026-08-20T07:00:46+00:00\",\"description\":\"useState vs useReducer \u2014 learn the real difference, when independent state calls for useState, and when coordinated updates call for useReducer.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/usestate_vs_usereducer_header-scaled.png\",\"contentUrl\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/usestate_vs_usereducer_header-scaled.png\",\"width\":2560,\"height\":1431,\"caption\":\"useState vs useReducer update flow diagram\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/usestate-vs-usereducer-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"useState vs useReducer: Choosing the Right State Hook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/#website\",\"url\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/\",\"name\":\"Practical Kishor\",\"description\":\"The quick brown fox jumps over the lazy dog\",\"publisher\":{\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/#\\\/schema\\\/person\\\/682d05c56912dd235403d4d49862750a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/#\\\/schema\\\/person\\\/682d05c56912dd235403d4d49862750a\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g\"},\"sameAs\":[\"https:\\\/\\\/kishor10d.com\\\/blogs\"],\"url\":\"https:\\\/\\\/kishor10d.com\\\/blogs\\\/author\\\/kishor10d\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"useState vs useReducer in React: When to Use Which","description":"useState vs useReducer \u2014 learn the real difference, when independent state calls for useState, and when coordinated updates call for useReducer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/","og_locale":"en_US","og_type":"article","og_title":"useState vs useReducer in React: When to Use Which","og_description":"useState vs useReducer \u2014 learn the real difference, when independent state calls for useState, and when coordinated updates call for useReducer.","og_url":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/","og_site_name":"Practical Kishor","article_published_time":"2026-08-20T07:00:46+00:00","og_image":[{"width":2560,"height":1431,"url":"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-scaled.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#article","isPartOf":{"@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/"},"author":{"name":"admin","@id":"https:\/\/kishor10d.com\/blogs\/#\/schema\/person\/682d05c56912dd235403d4d49862750a"},"headline":"useState vs useReducer: Choosing the Right State Hook","datePublished":"2026-08-20T07:00:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/"},"wordCount":818,"commentCount":0,"publisher":{"@id":"https:\/\/kishor10d.com\/blogs\/#\/schema\/person\/682d05c56912dd235403d4d49862750a"},"image":{"@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-1024x572.png","keywords":["frontend development","JavaScript","react","react hooks","state management","usereducer","usestate"],"articleSection":["ReactJS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/","url":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/","name":"useState vs useReducer in React: When to Use Which","isPartOf":{"@id":"https:\/\/kishor10d.com\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#primaryimage"},"image":{"@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-1024x572.png","datePublished":"2026-08-20T07:00:46+00:00","description":"useState vs useReducer \u2014 learn the real difference, when independent state calls for useState, and when coordinated updates call for useReducer.","breadcrumb":{"@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#primaryimage","url":"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-scaled.png","contentUrl":"https:\/\/kishor10d.com\/blogs\/wp-content\/uploads\/2026\/08\/usestate_vs_usereducer_header-scaled.png","width":2560,"height":1431,"caption":"useState vs useReducer update flow diagram"},{"@type":"BreadcrumbList","@id":"https:\/\/kishor10d.com\/blogs\/usestate-vs-usereducer-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kishor10d.com\/blogs\/"},{"@type":"ListItem","position":2,"name":"useState vs useReducer: Choosing the Right State Hook"}]},{"@type":"WebSite","@id":"https:\/\/kishor10d.com\/blogs\/#website","url":"https:\/\/kishor10d.com\/blogs\/","name":"Practical Kishor","description":"The quick brown fox jumps over the lazy dog","publisher":{"@id":"https:\/\/kishor10d.com\/blogs\/#\/schema\/person\/682d05c56912dd235403d4d49862750a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kishor10d.com\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/kishor10d.com\/blogs\/#\/schema\/person\/682d05c56912dd235403d4d49862750a","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g","caption":"admin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/56b0564d13413fec0713653cf76e91ba4d9c5fbbf6dbe0a8adbd3941c88bc1e4?s=96&d=mm&r=g"},"sameAs":["https:\/\/kishor10d.com\/blogs"],"url":"https:\/\/kishor10d.com\/blogs\/author\/kishor10d\/"}]}},"_links":{"self":[{"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":2,"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":146,"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/posts\/143\/revisions\/146"}],"wp:attachment":[{"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kishor10d.com\/blogs\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}