{"id":115302,"date":"2022-11-15T15:00:00","date_gmt":"2022-11-15T13:00:00","guid":{"rendered":"https:\/\/www.javacodegeeks.com\/?p=115302"},"modified":"2022-11-15T14:27:22","modified_gmt":"2022-11-15T12:27:22","slug":"usereducer-hook-in-react-js","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html","title":{"rendered":"useReducer Hook in React-js"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will understand how to use the useReducer hook in a react-js application.<\/p>\n<h2>1. Introduction<\/h2>\n<p><strong>React<\/strong> is a flexible javascript library responsible for building reusable UI components. It is an open-source component-based frontend library responsible only for the view part of an application and works in a virtual document object model. But before that let us take a look at the differences between angular and react \u2013<\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>Angular<\/strong><\/td>\n<td><strong>React<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Complete framework<\/td>\n<td>Library<\/td>\n<\/tr>\n<tr>\n<td>Object-oriented programming<\/td>\n<td>Extension to the javascript library and its internal architecture is based on jsx<\/td>\n<\/tr>\n<tr>\n<td>Based on the model view controller and real document object model<\/td>\n<td>Based on the virtual document object model<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>1.1 useReducer hook in React-js<\/h3>\n<p><strong>Hooks<\/strong> in react-js are the functions that are hooked into react-js state and lifecycle features from function components. The <code>useReducer(\u2026)<\/code> hook is sometimes used to manage the state of an application. It is similar to the <code>useState(\u2026)<\/code> hook just a bit more complex and acts as an alternative to manage the complex state in your application. It is a <em>pure function<\/em> that has no disadvantages. Any function in javascript is considered is pure when \u2013<\/p>\n<ul>\n<li>The function that always returns the same output if the same arguments are passed to the function<\/li>\n<li>The function does not show any ill effects<\/li>\n<\/ul>\n<p>The useReducer hook is represented by the below syntax in react-js \u2013<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Hook syntax<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">const [state, dispatch] = useReducer(reducerFunction, initialArgument);\n<\/pre>\n<h3>1.2 Setting up dependencies<\/h3>\n<p>To play with React let us set up some of the required dependencies.<\/p>\n<h4>1.2.1 Setting up Node.js<\/h4>\n<p>To set up <strong>Node.js<\/strong> on windows you will need to download the installer from <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">this<\/a> link. Click on the installer (also include the NPM package manager) for your platform and run the installer to start with the Node.js setup wizard. Follow the wizard steps and click on Finish when it is done. If everything goes well you can navigate to the command prompt to verify if the installation was successful as shown in Fig. 1.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/node-npm-installation-img1-1.jpg\"><img decoding=\"async\" width=\"480\" height=\"91\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/node-npm-installation-img1-1.jpg\" alt=\"Fig. 1: Verifying node and npm installation\" class=\"wp-image-115303\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/node-npm-installation-img1-1.jpg 480w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/node-npm-installation-img1-1-300x57.jpg 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 1: Verifying node and npm installation<\/figcaption><\/figure>\n<\/div>\n<h4>1.2.2 Setting up React-js project<\/h4>\n<p>Once the Nodejs setup is successful we will use the below command to install the React library and set up the project. Do note that the <code>npx<\/code> package is available with the npm 5.2 version and above.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p><span style=\"text-decoration: underline;\"><em>Create project structure<\/em><\/span><\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">$ npx create-react-app usereducer-app\n<\/pre>\n<p>The above command will take some time to install the React library and create a new project named &#8211; <code>usereducer-app<\/code> as shown below.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectstructureguide-img1.jpg\"><img decoding=\"async\" width=\"260\" height=\"395\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectstructureguide-img1.jpg\" alt=\"Fig. 2: usereducer Project structure\" class=\"wp-image-115304\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectstructureguide-img1.jpg 260w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectstructureguide-img1-197x300.jpg 197w\" sizes=\"(max-width: 260px) 100vw, 260px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 2: usereducer Project structure<\/figcaption><\/figure>\n<\/div>\n<h2>2. useReducer hook in React-js<\/h2>\n<p>To set up the application, we will need to navigate to a path where our project will reside and I will be using <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\">Visual Studio Code<\/a> as my preferred IDE.<\/p>\n<h3>2.1 Setting up the React code<\/h3>\n<p>To understand a practical implementation let us go through some hands-on exercises.<\/p>\n<h4>2.1.1 Creating components<\/h4>\n<p>Create a folder named <code>components<\/code> in the <code>src<\/code> folder.<\/p>\n<h5>2.1.1.1 Creating usereducer component<\/h5>\n<p>Add the following code to the <code>UseReducer.js<\/code> file. The file will be responsible to handle the interactions with the reducer hook with the help of two buttons and show the counter value on the page.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>UseReducer.js<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import React, { useReducer } from \"react\";\nimport \".\/UseReducer.css\";\n\nconst initialState = 0;\n\nconst reducer = (state, action) =&gt; {\n  \/\/ console.log(state, action);\n  if (action.type === \"INC\") state = state + 1;\n\n  if (action.type === \"DEC\") state = state - 1;\n\n  return state;\n};\n\nconst UseReducer = () =&gt; {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    &lt;div&gt;\n      &lt;p className=\"counter\"&gt;Counter: {state}&lt;\/p&gt;\n      &lt;div&gt;\n        &lt;button\n          type=\"button\"\n          className=\"button\"\n          onClick={() =&gt; dispatch({ type: \"INC\" })}\n        &gt;\n          Increment\n        &lt;\/button&gt;\n        &lt;span&gt;\u00a0&lt;\/span&gt;\n        &lt;button\n          type=\"button\"\n          className=\"button\"\n          onClick={() =&gt; dispatch({ type: \"DEC\" })}\n        &gt;\n          Decrement\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default UseReducer;\n<\/pre>\n<h4>2.1.2 Creating implementation file of usereducer App<\/h4>\n<p>In the <code>App.js<\/code> component we will include the use reducer component and specify the generic header information content for the application.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>App.js<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import \".\/App.css\";\nimport UseReducer from \".\/components\/UseReducer\";\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;h1&gt;useReducer hook example in ReactJs&lt;\/h1&gt;\n      &lt;i&gt;Click on buttons to play with the counter value&lt;\/i&gt;\n      &lt;UseReducer&gt;&lt;\/UseReducer&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/pre>\n<h2>3. Run the usereducer App<\/h2>\n<p>To run the application navigate to the project directory and enter the following command as shown below in the terminal.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Run command<\/em><\/span><\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">$ npm run start\n<\/pre>\n<p>The application will be started on the default port. In case the application does not get started on the default port you can change the port number as per your requirement. I have changed the default port to <code>2000<\/code>.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectrunguide-img1.jpg\"><img decoding=\"async\" width=\"594\" height=\"145\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectrunguide-img1.jpg\" alt=\"Fig. 3: usereducer Application run\" class=\"wp-image-115305\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectrunguide-img1.jpg 594w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectrunguide-img1-300x73.jpg 300w\" sizes=\"(max-width: 594px) 100vw, 594px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 3: usereducer Application run<\/figcaption><\/figure>\n<\/div>\n<h2>4. Demo<\/h2>\n<p>The application will be started in the default browser as shown below and a welcome page will be shown.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectdemoguide-img1.jpg\"><img decoding=\"async\" width=\"585\" height=\"291\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectdemoguide-img1.jpg\" alt=\"Fig. 4: Application home page\" class=\"wp-image-115306\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectdemoguide-img1.jpg 585w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducerhookinreactjs-projectdemoguide-img1-300x149.jpg 300w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/a><figcaption class=\"wp-element-caption\">Fig. 4: Application home page<\/figcaption><\/figure>\n<\/div>\n<p>The application page shows 2 buttons that you can click to increase or decrease the counter. The counter value is handled with the help of the <code>useReducer(\u2026)<\/code> hook. That is all for this tutorial and I hope the article served you with whatever you were looking for. Happy Learning and do not forget to share!<\/p>\n<h2>5. Summary<\/h2>\n<p>In this tutorial, we created a React application and understood the <code>useReducer()<\/code> hook in React-js. You can download the source code from the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2><a name=\"projectDownload\"><\/a>6. Download the Project<\/h2>\n<p>This was a tutorial to understand the <code>useReducer()<\/code> hook in a React application.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a href=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/11\/usereducer-hook-in-reactjs.zip\"><strong>useReducer Hook in React-js<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will understand how to use the useReducer hook in a react-js application. 1. Introduction React is a flexible javascript library responsible for building reusable UI components. It is an open-source component-based frontend library responsible only for the view part of an application and works in a virtual document object &hellip;<\/p>\n","protected":false},"author":26931,"featured_media":92051,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1903],"tags":[803,1470,1415,1919],"class_list":["post-115302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-javascript","tag-react","tag-react-js","tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>useReducer Hook in React-js - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Welcome readers, in this tutorial, we will understand how to use useReducer() hook in a reactjs application. React is a flexible...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"useReducer Hook in React-js - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Welcome readers, in this tutorial, we will understand how to use useReducer() hook in a reactjs application. React is a flexible...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-15T13:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin Batra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin Batra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"useReducer Hook in React-js\",\"datePublished\":\"2022-11-15T13:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html\"},\"wordCount\":724,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"keywords\":[\"JavaScript\",\"React\",\"React.js\",\"Reactjs\"],\"articleSection\":[\"React.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html\",\"name\":\"useReducer Hook in React-js - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"datePublished\":\"2022-11-15T13:00:00+00:00\",\"description\":\"Welcome readers, in this tutorial, we will understand how to use useReducer() hook in a reactjs application. React is a flexible...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/usereducer-hook-in-reactjs.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"React.js\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/react-js\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"useReducer Hook in React-js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\",\"name\":\"Yatin Batra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"caption\":\"Yatin Batra\"},\"description\":\"An experience full-stack engineer well versed with Core Java, Spring\\\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).\",\"sameAs\":[\"https:\\\/\\\/www.javacodegeeks.com\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/yatin-batra\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"useReducer Hook in React-js - Java Code Geeks","description":"Welcome readers, in this tutorial, we will understand how to use useReducer() hook in a reactjs application. React is a flexible...","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:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html","og_locale":"en_US","og_type":"article","og_title":"useReducer Hook in React-js - Java Code Geeks","og_description":"Welcome readers, in this tutorial, we will understand how to use useReducer() hook in a reactjs application. React is a flexible...","og_url":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2022-11-15T13:00:00+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","type":"image\/jpeg"}],"author":"Yatin Batra","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Yatin Batra","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"useReducer Hook in React-js","datePublished":"2022-11-15T13:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html"},"wordCount":724,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","keywords":["JavaScript","React","React.js","Reactjs"],"articleSection":["React.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html","url":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html","name":"useReducer Hook in React-js - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","datePublished":"2022-11-15T13:00:00+00:00","description":"Welcome readers, in this tutorial, we will understand how to use useReducer() hook in a reactjs application. React is a flexible...","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/usereducer-hook-in-reactjs.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"React.js","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/react-js"},{"@type":"ListItem","position":5,"name":"useReducer Hook in React-js"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d","name":"Yatin Batra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","caption":"Yatin Batra"},"description":"An experience full-stack engineer well versed with Core Java, Spring\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/www.javacodegeeks.com\/author\/yatin-batra"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/115302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/26931"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=115302"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/115302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/92051"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=115302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=115302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=115302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}