{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/usestate-react-hook-allows-updating-state-with-a-function",
    "result": {"data":{"site":{"siteMetadata":{"title":"your friend Joel's digital garden","description":"Articles and notes from a collaborator at egghead.io. Musings on software, business, and life from a skilled virtual assistant.","author":{"name":"Joel Hooks"},"keywords":["Video Blogger"]}},"mdx":{"excerpt":"The  useState  hook in React is a great way to persist and update data within your React components. A simple component might look like this: This approach works for most cases but relies on the value of count in the current render. In this…","fields":{"github":"https://github.com/joelhooks/joelhooks-com/tree/master/content/blog/2020-09-03--usestate-react-hook-allows-updating-state-with-a-function~~70dpp6MqW/index.mdx"},"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  \"id\": \"70dpp6MqW\",\n  \"slug\": \"usestate-react-hook-allows-updating-state-with-a-function\",\n  \"date\": \"2020-09-03T00:00:00.000Z\",\n  \"title\": \"useState React hook allows updating state with a function\",\n  \"published\": false\n};\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, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useState\"), \" hook in React is a great way to persist and update data within your React components. A simple component might look like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import React from 'react'\\n\\nexport default function SimpleComponent() {\\n  const [count, setCount] = React.useState(0)\\n  const incrementCount = () => setCount(count + 1)\\n\\n  return (\\n    <>\\n      <h1>The Count is {count}</h1>\\n      <button onClick={incrementCount}>+1</button>\\n    </>\\n  )\\n}\\n\")), mdx(\"p\", null, \"This approach works for most cases but relies on the value of count in the current render.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import React from 'react'\\n\\nexport default function SimpleComponent() {\\n  const [count, setCount] = React.useState(0)\\n  const incrementCount = () => setCount((previousCount) => previousCount + 1)\\n\\n  return (\\n    <>\\n      <h1>The Count is {count}</h1>\\n      <button onClick={incrementCount}>+1</button>\\n    </>\\n  )\\n}\\n\")), mdx(\"p\", null, \"In this second example we are passing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setCount\"), \" a function: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(previousCount) => previousCount + 1\"), \". This function takes 1 argument, the previous value, and allows you to reference that value.\"), mdx(\"p\", null, \"In most circumstances the first approach is fine, but the ability to pass a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/hooks-reference.html#functional-updates\"\n  }, \"functional update\"), \" guarantees that you're updating the correct value if it happened to be update multiple times in the same execution frame.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"useState React hook allows updating state with a function","date":"September 03, 2020","banner":null,"slug":"usestate-react-hook-allows-updating-state-with-a-function","keywords":null}}},"pageContext":{"id":"df08f616-1dda-5669-be0b-fe8f11f0dbb3","prev":{"id":"2a32d660-791f-5332-a5e7-fbe5fc16bbe1","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"If you want to jump right to the finish line and have an existing Github repository you want to run tests on, drop the following into a file here  .github/workflows/tests.yml  and you'll be running your tests whenever you push to your main branch or…","fields":{"title":"Continuous Integration with Jest Tests and Github Actions","slug":"jest-and-github-actions","date":"2020-09-10T00:00:00.000Z"}},"next":{"id":"94c38ad9-7713-5b66-ad13-2b4faf2425aa","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"Most of us have an ingrained sense of how to teach. This comes from the typical 12-16 years folks spend in school being taught to. Through a sort of osmosis process we get the feeling of how to teach and approach sharing knowledge with others. It…","fields":{"title":"Understanding by Design","slug":"understanding-by-design","date":"2020-09-03T00:00:00.000Z"}}}},
    "staticQueryHashes": ["1045846374"]}