{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/2020-04-04-refactoring-use-state-to-use-reducer/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"7aaec4f2-4c3a-5431-8714-fc4082af0b41","timeToRead":2,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Refactoring useState() To useReducer()\",\n  \"date\": \"2020-04-04T17:06:08.127Z\",\n  \"template\": \"post\",\n  \"slug\": \"2020-04-04-refactoring-use-state-to-use-reducer\",\n  \"category\": [\"tutorial\"],\n  \"tags\": [\"React\", \"React Hooks\", \"Reduce\"],\n  \"description\": \"This article walks through how to combine multiple useState() React hooks logic into a single useReducer().\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar TableOfContents = makeShortcode(\"TableOfContents\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I recently created a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://stimulus-check-calculator.now.sh/\"\n  }, \"Stimulus Check Calculator\"), \" based on figures from the CARES Act and the Washington Post to help people estimate the amount of their stimulus check under the CARES Act.\\nThis article will walk through how I refactored the calculator's state management by consolidating multiple \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState()\"), \" React hooks into a single \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useReducer()\"), \". \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useReducer()\"), \" is an alternative that can be considered when using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState()\"), \" to manage state in functional React components. This article assumes some familiarity with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class\"\n  }, \"state management in React\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/hooks-reference.html\"\n  }, \"React Hooks\"), \".\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/stimulus-check-calculator-screenshot.png#center\",\n    \"alt\": \"screenshot of the stimulus check calculator app\"\n  })), mdx(TableOfContents, {\n    headings: props.tableOfContents,\n    mdxType: \"TableOfContents\"\n  }), mdx(\"h2\", {\n    \"id\": \"managing-form-state-with-usestate\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#managing-form-state-with-usestate\",\n    \"aria-label\": \"managing form state with usestate permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Managing form state with useState();\"), mdx(\"p\", null, \"In order to use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState()\"), \" React hook for state management of the calculator I first needed to import \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState\"), \" from React.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { useState } from \\\"react\\\"\\n\")), mdx(\"h3\", {\n    \"id\": \"setting-the-initial-state-with-usestate\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#setting-the-initial-state-with-usestate\",\n    \"aria-label\": \"setting the initial state with usestate permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Setting the initial state with useState()\"), mdx(\"p\", null, \"Then within the function that is returning the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form\"), \" component I setup the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState()\"), \" hooks for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"taxYear\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filingStatus\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"income\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"stimulusAmount\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const { SINGLE, HEADOFHOUSE, MARRIED } = filingStatuses\\nconst [taxYear, setTaxYear] = useState(2019)\\nconst [filingStatus, setFilingStatus] = useState(SINGLE)\\nconst [income, setIncome] = useState(\\\"75000\\\")\\nconst [children, setChildren] = useState(0)\\nconst [stimulusAmount, setStimulusAmount] = useState(-1)\\n\")), mdx(\"p\", null, \"The parameter passed into \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState()\"), \" represents the default value for that particular state. Meaning that the below line is setting the default value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"taxYear\"), \" in state to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"2019\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const [taxYear, setTaxYear] = useState(2019)\\n\")), mdx(\"h3\", {\n    \"id\": \"updating-form-state-with-usestate\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#updating-form-state-with-usestate\",\n    \"aria-label\": \"updating form state with usestate permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Updating form state with useState()\"), mdx(\"p\", null, \"Event handlers, such as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChange\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \" can be used to update the component's state when data in the form changes. Managing form state by updating the component's internal state is considered a \\\"\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/uncontrolled-components.html\"\n  }, \"controlled component\"), \"\\\" vs. having the DOM manage the state of the form.\"), mdx(\"p\", null, \"In order to update the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"taxYear\"), \"'s value to the selected year, there's an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \" event handler that calls \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setTaxYear(year)\"), \" with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"year\"), \" parameter being the current \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"year\"), \" that is selected.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  ;[2019, 2018].map(year => (\\n    <button\\n      onClick={() => setTaxYear(year)}\\n      className={year == taxYear ? \\\"selectedButton\\\" : \\\"\\\"}\\n      key={year}\\n      name=\\\"tax-year\\\"\\n    >\\n      {year == 2019 ? \\\"Yes\\\" : \\\"No\\\"}\\n    </button>\\n  ))\\n}\\n\")), mdx(\"p\", null, \"Similar logic is used to update \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filingStatus\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"income\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"stimulusAmount\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handleSubmit\"), \" when form data is updated or submitted.\"), mdx(\"h2\", {\n    \"id\": \"managing-form-state-with-usereducer\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#managing-form-state-with-usereducer\",\n    \"aria-label\": \"managing form state with usereducer permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Managing form state with useReducer();\"), mdx(\"p\", null, \"In order to use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useReducer()\"), \" React hook for state management of the calculator I first needed to import \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useReducer\"), \" from React. If you are not familiar with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reducers\"), \" in JavaScript check out my article on \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/2020-03-29-understanding-reduce-in-javascript\"\n  }, \"Understanding Reduce in Javascript\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { useReducer } from \\\"react\\\"\\n\")), mdx(\"h3\", {\n    \"id\": \"setting-the-initial-state-with-usereducer\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#setting-the-initial-state-with-usereducer\",\n    \"aria-label\": \"setting the initial state with usereducer permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Setting the initial state with useReducer()\"), mdx(\"p\", null, \"Then I set the initial state for the component like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const initialState = {\\n  taxYear: 2019,\\n  filingStatus: SINGLE,\\n  income: \\\"75000\\\",\\n  children: 0,\\n  stimulusAmount: -1,\\n}\\n\\nconst [state, dispatch] = useReducer(reducer, initialState)\\n\")), mdx(\"p\", null, \"Similar to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useReducer\"), \" returns the related state along with a method to update the state. With \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useReducer\"), \" instead of updating the state by passing a value to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setState()\"), \" an action should be dispatched which will call the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reducer\"), \".\"), mdx(\"p\", null, \"In my case the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reducer\"), \" function looked like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"function reducer(state, action) {\\n  const { type, payload } = action\\n  return { ...state, [type]: payload }\\n}\\n\")), mdx(\"h3\", {\n    \"id\": \"updating-form-state-with-usereducer\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#updating-form-state-with-usereducer\",\n    \"aria-label\": \"updating form state with usereducer permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Updating form state with useReducer()\"), mdx(\"p\", null, \"Each time \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dispatch\"), \" is called it should be called with an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" item that contains a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" and in this particular case a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"payload\"), \" as well. The state of tax year can be updated \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \" by firing\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \" onClick={() => dispatch({ type: \\\"taxYear\\\", payload: year })}\\n\")), mdx(\"p\", null, \"instead of\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"  onClick={() => setTaxYear(year)}\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reducer(state, action)\"), \" is expecting to receive an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" that is an object with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"payload\"), \". Within the reducer function the action's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"payload\"), \" are used to return the current \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"state\"), \" with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[type]: payload\"), \" overwritten.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const { type, payload } = action\\nreturn { ...state, [type]: payload }\\n\")), mdx(\"p\", null, \"In the case of updating the state from 2017 if the current state was:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const initialState = {\\n  taxYear: 2019,\\n  filingStatus: SINGLE,\\n  income: \\\"75000\\\",\\n  children: 0,\\n  stimulusAmount: -1,\\n}\\n\")), mdx(\"p\", null, \"Then firing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick={() => dispatch({ type: \\\"taxYear\\\", payload: 2018 })}\"), \" would result in the reducer returning the current state but with only the value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"taxYear\"), \" overwritten and set to 2018. Note: this works as written because for each action in this example the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" of action is the same as its corresponding key value in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"state\"), \".\"), mdx(\"h2\", {\n    \"id\": \"full-source-code-of-examples\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#full-source-code-of-examples\",\n    \"aria-label\": \"full source code of examples permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Full Source Code of Examples\"), mdx(\"p\", null, \"The full source code below compares the full implementations of the state management methods above. As was illustrated above, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useReducer()\"), \" is another React hook that can be used for state management and can be implemented in a way that allows logic from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState()\"), \" hooks to be consolidated. The related source code for the current version of the calculator is available on \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/M0nica/stimulus-check-calculator\"\n  }, \"GitHub\"), \".\"), mdx(\"h3\", {\n    \"id\": \"source-code-using-usestate\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#source-code-using-usestate\",\n    \"aria-label\": \"source code using usestate permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"source code using useState():\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { filingStatuses } from \\\"../utils/constants\\\"\\nimport { getStimulusAmount } from \\\"../utils/calculateStimulus\\\"\\nimport { useState } from \\\"react\\\"\\n\\nfunction Form() {\\n  const { SINGLE, HEADOFHOUSE, MARRIED } = filingStatuses\\n  const [taxYear, setTaxYear] = useState(2019)\\n  const [filingStatus, setFilingStatus] = useState(SINGLE)\\n  const [income, setIncome] = useState(\\\"75000\\\")\\n  const [children, setChildren] = useState(0)\\n  const [stimulusAmount, setStimulusAmount] = useState(-1)\\n\\n  function handleSubmit(e) {\\n    e.preventDefault()\\n    setStimulusAmount(calculateStimulus(income, filingStatus, children))\\n  }\\n\\n  return (\\n    <form onSubmit={handleSubmit}>\\n      <label htmlFor=\\\"tax-year\\\">Have you filed your 2019 taxes yet?</label>\\n      {[2019, 2018].map(year => (\\n        <button\\n          onClick={() => setTaxYear(year)}\\n          className={year == taxYear ? \\\"selectedButton\\\" : \\\"\\\"}\\n          key={year}\\n          name=\\\"tax-year\\\"\\n        >\\n          {year == 2019 ? \\\"Yes\\\" : \\\"No\\\"}\\n        </button>\\n      ))}\\n      <label htmlFor=\\\"filing-status\\\">\\n        What was your filing status in your {taxYear} taxes?{\\\" \\\"}\\n      </label>\\n      {[SINGLE, MARRIED, HEADOFHOUSE].map(status => (\\n        <button\\n          onClick={() => setFilingStatus(status)}\\n          className={status == filingStatus ? \\\"selectedButton\\\" : \\\"\\\"}\\n          name=\\\"filing-status\\\"\\n          key={status}\\n        >\\n          {\\\" \\\"}\\n          {status}\\n        </button>\\n      ))}\\n      <br />\\n      <label htmlFor=\\\"adjusted-income\\\">\\n        What was your adjusted gross income in {taxYear}?\\n      </label>$ <input\\n        type=\\\"number\\\"\\n        inputMode=\\\"numeric\\\"\\n        pattern=\\\"[0-9]*\\\"\\n        value={income}\\n        onChange={e => setIncome(e.target.value)}\\n        min={0}\\n        name=\\\"adjusted-income\\\"\\n      />\\n      <br />\\n      <label htmlFor=\\\"children\\\">\\n        How many children under age 17 did you claim as dependents in {taxYear}?\\n      </label>\\n      <input\\n        type=\\\"number\\\"\\n        inputMode=\\\"numeric\\\"\\n        pattern=\\\"[0-9]*\\\"\\n        value={children}\\n        onChange={e => setChildren(e.target.value)}\\n        min={0}\\n        name=\\\"label\\\"\\n      />\\n      <br />\\n      <button type=\\\"submit\\\" className=\\\"calculateButton\\\">\\n        Calculate\\n      </button>\\n      <p>\\n        {\\\" \\\"}\\n        {stimulusAmount >= 0 &&\\n          (stimulusAmount > 0\\n            ? `Your stimulus amount is expected to be $${stimulusAmount}.`\\n            : `You are not expected to receive a stimulus.`)}\\n      </p>\\n      <br />\\n    </form>\\n  )\\n}\\n\\nexport default Form\\n\")), mdx(\"h3\", {\n    \"id\": \"source-code-using-usereducer\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#source-code-using-usereducer\",\n    \"aria-label\": \"source code using usereducer permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"source code using useReducer():\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { useReducer } from \\\"react\\\"\\nimport { filingStatuses } from \\\"../utils/constants\\\"\\nimport { getStimulusAmount } from \\\"../utils/calculateStimulus\\\"\\n\\nfunction reducer(state, action) {\\n  const { type, payload } = action\\n  return { ...state, [type]: payload }\\n}\\n\\nfunction Form() {\\n  const { SINGLE, HEADOFHOUSE, MARRIED } = filingStatuses\\n\\n  const initialState = {\\n    taxYear: 2019,\\n    filingStatus: SINGLE,\\n    income: \\\"75000\\\",\\n    children: 0,\\n    stimulusAmount: -1,\\n  }\\n\\n  const [state, dispatch] = useReducer(reducer, initialState)\\n\\n  function handleSubmit(e) {\\n    e.preventDefault()\\n    dispatch({\\n      type: \\\"stimulusAmount\\\",\\n      payload: getStimulusAmount(income, filingStatus, children),\\n    })\\n  }\\n\\n  const { taxYear, filingStatus, income, children, stimulusAmount } = state\\n\\n  return (\\n    <form onSubmit={handleSubmit}>\\n      <label htmlFor=\\\"tax-year\\\">Have you filed your 2019 taxes yet?</label>\\n      {[2019, 2018].map(year => (\\n        <button\\n          onClick={() => dispatch({ type: \\\"taxYear\\\", payload: year })}\\n          className={year == taxYear ? \\\"selectedButton\\\" : \\\"\\\"}\\n          key={year}\\n          name=\\\"tax-year\\\"\\n        >\\n          {year == 2019 ? \\\"Yes\\\" : \\\"No\\\"}\\n        </button>\\n      ))}\\n      <label htmlFor=\\\"filing-status\\\">\\n        What was your filing status in your {taxYear} taxes?{\\\" \\\"}\\n      </label>\\n      {[SINGLE, MARRIED, HEADOFHOUSE].map(status => (\\n        <button\\n          onClick={() => dispatch({ type: \\\"filingStatus\\\", payload: status })}\\n          className={status == filingStatus ? \\\"selectedButton\\\" : \\\"\\\"}\\n          name=\\\"filing-status\\\"\\n          key={status}\\n        >\\n          {\\\" \\\"}\\n          {status}\\n        </button>\\n      ))}\\n      <br />\\n      <label htmlFor=\\\"adjusted-income\\\">\\n        What was your adjusted gross income in {taxYear}?\\n      </label>$ <input\\n        type=\\\"string\\\"\\n        inputMode=\\\"numeric\\\"\\n        pattern=\\\"[0-9]*\\\"\\n        value={income}\\n        onChange={e => dispatch({ type: \\\"income\\\", payload: e.target.value })}\\n        min={0}\\n      />\\n      <br />\\n      <label htmlFor=\\\"children\\\">\\n        How many children under age 17 did you claim as dependents in {taxYear}?\\n      </label>\\n      <input\\n        type=\\\"number\\\"\\n        inputMode=\\\"numeric\\\"\\n        pattern=\\\"[0-9]*\\\"\\n        value={children}\\n        onChange={e => dispatch({ type: \\\"children\\\", payload: e.target.value })}\\n        min={0}\\n        name=\\\"label\\\"\\n      />\\n      <br />\\n      <button type=\\\"submit\\\" className=\\\"calculateButton\\\">\\n        Calculate\\n      </button>\\n      <p>\\n        {\\\" \\\"}\\n        {stimulusAmount >= 0 &&\\n          (stimulusAmount > 0\\n            ? `Your stimulus amount is likely to be ${new Intl.NumberFormat(\\n                \\\"en-US\\\",\\n                { style: \\\"currency\\\", currency: \\\"USD\\\" }\\n              ).format(stimulusAmount)}.`\\n            : `You are not expected to receive a stimulus.`)}\\n      </p>\\n      <br />\\n    </form>\\n  )\\n}\\n\\nexport default Form\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#managing-form-state-with-usestate","title":"Managing form state with useState();","items":[{"url":"#setting-the-initial-state-with-usestate","title":"Setting the initial state with useState()"},{"url":"#updating-form-state-with-usestate","title":"Updating form state with useState()"}]},{"url":"#managing-form-state-with-usereducer","title":"Managing form state with useReducer();","items":[{"url":"#setting-the-initial-state-with-usereducer","title":"Setting the initial state with useReducer()"},{"url":"#updating-form-state-with-usereducer","title":"Updating form state with useReducer()"}]},{"url":"#full-source-code-of-examples","title":"Full Source Code of Examples","items":[{"url":"#source-code-using-usestate","title":"source code using useState():"},{"url":"#source-code-using-usereducer","title":"source code using useReducer():"}]}]},"frontmatter":{"title":"Refactoring useState() To useReducer()","date":"April 04, 2020","description":"This article walks through how to combine multiple useState() React hooks logic into a single useReducer().","tags":["React","React Hooks","Reduce"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1251180800747483136/1252944868466462721","wmProperty":"in-reply-to","wmId":786417,"type":"entry","url":"https://twitter.com/waterproofheart/status/1252944868466462721","likeOf":null,"author":{"url":"https://twitter.com/waterproofheart","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b91e7d67123983ab05d03e92669a08a56716940ed00c451370cc9eff050632d7.jpg","name":"Monica.dev 👩🏾‍💻"},"published":"April 22, 2020","content":{"text":"Thanks for sharing!"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1246923438343827464","wmProperty":"mention-of","wmId":786415,"type":"entry","url":"https://twitter.com/costagolub/status/1246923438343827464","likeOf":null,"author":{"url":"https://twitter.com/costagolub","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c2b7260425b919fdaee912f977f1862268611e6337171bade3a93d31fc6c0f98.jpg","name":"Constantine Golub"},"published":"April 05, 2020","content":{"text":"Refactoring useState() To useReducer() aboutmonica.com/blog/2020-04-0… #React #React Hooks #Reduce с помощью @waterproofheart"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1246870138038751233","wmProperty":"mention-of","wmId":786416,"type":"entry","url":"https://twitter.com/FrontEndReads/status/1246870138038751233","likeOf":null,"author":{"url":"https://twitter.com/FrontEndReads","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/465be10041550ea771109e98aa3129f9ca5bf6a32dddeb2f295ae262e6ef8e8b.jpg","name":"Front-End Reads"},"published":"April 05, 2020","content":{"text":"Refactoring useState() To useReducer() ift.tt/3dWzZgo"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/14636348","wmProperty":"like-of","wmId":786413,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-14636348","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/oxodesign","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b3523749d0e475a2eb5c2b515cbccdb22bf6dfa9dbb7c4f22c288ce3b9ee33df.jpg","name":"Flamur Mavraj"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1247581412276011010/1247581592127787011","wmProperty":"repost-of","wmId":786414,"type":"entry","url":"https://twitter.com/_reactdev/status/1247581592127787011","likeOf":null,"author":{"url":"https://twitter.com/_reactdev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a909846d022fd41f5711bdfac2c689a5247069155bfd2dbef6db22233027ddd1.jpg","name":"React Developer"},"published":"April 07, 2020","content":{"text":"I recently wrote about my experience switching a small #ReactJS app’s state management from using multiple useState() hooks to one useReduc"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/259171305","wmProperty":"like-of","wmId":786411,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-259171305","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/erinfoox","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/88f24b906deabc64c7d3dc1daeff89013a8525f53c7dc99ec82385ced112d9c4.jpg","name":"Erin Fox"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/1221873224704831494","wmProperty":"like-of","wmId":786412,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-1221873224704831494","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/reactlibraries","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b77f747d7bdd236f4c5f440a05b35079cc9e248ee18d6413c707e27d45f0e469.jpg","name":"React Libraries"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/1111007023041310725","wmProperty":"like-of","wmId":786409,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-1111007023041310725","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/SylwiaVargas","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c57a9a52bae1af2534edef9ea4f5f69dd14b8797ae79435cd5f6cefd4694b0fe.png","name":"sylwia vargas"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/1001423318770216963","wmProperty":"like-of","wmId":786410,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-1001423318770216963","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/DiarMustafa12","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/563241a2357b2f420bae5505e9a2a7a5ff9ef420d42a326017526998b0ad2d33.jpg","name":"Diar"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/16122359","wmProperty":"like-of","wmId":786408,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-16122359","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/ProvablyFlarnie","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a2827291bd698fc7f0c685ae9e683e6f00021d1aeedbbb83f700f7d6d19f68e4.png","name":"provably Flarnie"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/15842980","wmProperty":"like-of","wmId":786407,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-15842980","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/UnusedPotential","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/969dab6b7186549df53593b99bc78f9a2217e08cbc199f97cd441f681ad933ac.jpg","name":"Zell, trying hard"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1247581412276011010/3229156952","wmProperty":"like-of","wmId":786406,"type":"entry","url":"https://twitter.com/waterproofheart/status/1247581412276011010#favorited-by-3229156952","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/adriannavaldivi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bf85eb8334f2bd4eec3992d0e45817b177a49c3d5503e7a9da68cd033717b954.jpg","name":"AV"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1246932189792669698/1246932213767249921","wmProperty":"repost-of","wmId":786405,"type":"entry","url":"https://twitter.com/JSNewsBot/status/1246932213767249921","likeOf":null,"author":{"url":"https://twitter.com/JSNewsBot","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a2999307c2290e77246d3a0c9a82ac1306f6a21a33b51ed6f96c54f4e6689e57.jpg","name":"JS News"},"published":"April 05, 2020","content":{"text":"A few days ago I created a Stimulus Check Calculator. I wrote an article about my experience refactoring the #ReactJS app's state managemen"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/446681899","wmProperty":"like-of","wmId":786404,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-446681899","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/katydecorah","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/385a80c8a2e1480f59c168d291d23813d7039e535b55da674de5e00797fbd1f3.jpg","name":"Katy DeCorah"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/14255325","wmProperty":"like-of","wmId":786403,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-14255325","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/gjunkie","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d452a71eebd134e4ec4789fe80c7260189fa9cb2098b0ca4792b6b433d446af6.png","name":"Grounghog Day Freddie"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/630169387","wmProperty":"like-of","wmId":786402,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-630169387","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/_mjelle","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/60906c4c4a634d37cc4edc157b5757c53a881b21c1e3cd43d0d77c667b1d0cd1.jpg","name":"Michelle 🇨🇦"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/2945621218","wmProperty":"like-of","wmId":786401,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-2945621218","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/headlikeahole_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/14fee1bb61a5e95db7b425c417bf01bd42239aaec30186cb0a1a05121b13a9b7.jpg","name":"внутренняя эмиграция"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/839828916990799873","wmProperty":"like-of","wmId":786400,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-839828916990799873","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/smolcodes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b7134478f758a6676dd384ab63e90a9cdf970bde5baa7adfe0eed333390acd2d.jpg","name":"luncheon loaf"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/53984865","wmProperty":"like-of","wmId":786399,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-53984865","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/everydaysharday","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4292a00afae74e9afc642858fb58de01af268efb72277e34eff5f3dcd5c57034.jpg","name":"Sharday 👩🏿‍💻"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/1191511986997256192","wmProperty":"like-of","wmId":786398,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-1191511986997256192","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/lazyloading_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/171e4832aaedc59355f7cfd5085fc220c0586e1abf3d1490b1986aa1bdbe7dc3.png","name":"tabitha"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/119470963","wmProperty":"like-of","wmId":786397,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-119470963","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/simform","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4a0235793f80e3e2397950ff00825f8ba5dc3f3a4972f15fe50ee745ec9559bb.png","name":"Simform"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/864631382466809860","wmProperty":"like-of","wmId":786396,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-864631382466809860","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/essentialcode20","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/cd7e68bb93bf16a7d23575d0c84778745e445e4e935f6fc1beb143fa53e6d161.jpg","name":"Marien"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/2239670226","wmProperty":"like-of","wmId":786394,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-2239670226","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/m0neysha","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/29d19fdfcb50cfeed688480e70b5c9d0c59882de3ef9ac83f318f1c45db5da77.jpg","name":"Manisha"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/3276567452","wmProperty":"like-of","wmId":786395,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-3276567452","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/kuhnhausen","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a80398174d74d74112dfb5a7ee13aebf85b35c6a4c43a928b23f30c8ec65113a.jpg","name":"forgetfulMap"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/1233522969823129601","wmProperty":"like-of","wmId":786393,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-1233522969823129601","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/felabon","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d5810baf7472c31bce634360857517d99c025f354dc42615d7cf4c3b843e9482.jpg","name":"O::D::O::O"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1246932189792669698/3229156952","wmProperty":"like-of","wmId":786392,"type":"entry","url":"https://twitter.com/waterproofheart/status/1246932189792669698#favorited-by-3229156952","likeOf":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","author":{"url":"https://twitter.com/adriannavaldivi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bf85eb8334f2bd4eec3992d0e45817b177a49c3d5503e7a9da68cd033717b954.jpg","name":"AV"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1246851929306796035","wmProperty":"mention-of","wmId":786391,"type":"entry","url":"https://twitter.com/SoMiskeen/status/1246851929306796035","likeOf":null,"author":{"url":"https://twitter.com/SoMiskeen","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9511497940ccf988c4e913ace78c32f31a1a02bcc4895f0b906b69d4fd552d6a.jpg","name":"Trillfalgar D. Law"},"published":"April 05, 2020","content":{"text":"Refactoring useState() To useReducer() aboutmonica.com/blog/2020-04-0… #React #React Hooks #Reduce via @waterproofheart"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1251180800747483136","wmProperty":"mention-of","wmId":786172,"type":"entry","url":"https://twitter.com/peoray_/status/1251180800747483136","likeOf":null,"author":{"url":"https://twitter.com/peoray_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/192439a41a410b238a63decf4320fa99a10119dc3fc0f2bb5233323411df27b6.jpg","name":"Emmanuel Raymond"},"published":"April 17, 2020","content":{"text":"Refactoring useState() To useReducer() aboutmonica.com/blog/2020-04-0… #React #React Hooks #Reduce via @waterproofheart"}}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/2020-04-04-refactoring-use-state-to-use-reducer/","slug":"/blog/2020-04-04-refactoring-use-state-to-use-reducer/","prev":{"id":"3649910c-3092-5bce-a063-ef20dd7d32ae","frontmatter":{"title":"Top Gatsby Plugins For Developer Blogs","category":["opinion"],"date":"2020-04-19T17:44:36.261Z","slug":"2020-04-19-essential-gatsby-plugins-for-blogs","tags":["Gatsby","Blogging"],"redirects":null},"fields":{"slug":"/blog/2020-04-19-essential-gatsby-plugins-for-blogs/"}},"next":{"id":"fa5ef23b-ccf1-5713-acb2-a7771f165a22","frontmatter":{"title":"Understanding Reduce in JavaScript","category":["tutorial"],"date":"2020-03-29T22:21:35.600Z","slug":"2020-03-29-understanding-reduce-in-javascript","tags":["JavaScript","Functional Programming","Tutorial"],"redirects":null},"fields":{"slug":"/blog/2020-03-29-understanding-reduce-in-javascript/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}