{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/react-context",
    "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":"In a complicated web application there are going to be several pieces of truly global state that you'll need across your application. This is state that components need, but it's tedious and error prone to use prop drilling to pass state…","fields":{"github":"https://github.com/joelhooks/joelhooks-com/tree/master/content/blog/2020-05-12--using-react-context-and-custom-react-hooks-for-state-management-in-react-apps~~6zA6vP7oT/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\": \"6zA6vP7oT\",\n  \"slug\": \"react-context\",\n  \"date\": \"2020-05-12T00:00:00.000Z\",\n  \"title\": \"Using React Context and Custom React Hooks for State Management in React Apps\",\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, \"In a complicated web application there are going to be several pieces of truly global state that you'll need across your application. This is state that components need, but it's tedious and error prone to use prop drilling to pass state data around to all of the components that might need it.\"), mdx(\"p\", null, \"Referring to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://joelhooks.com/5-layers-react-state\"\n  }, \"the 5 layers of state in a React application\"), \" we can refer to this layer of state as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shared\"), \" or application state.\"), mdx(\"p\", null, \"It's such a common issue with React applications that many libraries have sprung up around solving the problem with managing global application state! When you reach for one of these libraries you are often making a strong commitment to developing a \\\"Redux app\\\" or a \\\"Apollo app\\\" instead of just a React app.\"), mdx(\"p\", null, \"These tools are excellent and worth your time and effort to research and understand if they might be viable for your team and users' needs, but React also ships with excellent tools for solving shared application state with React Context and custom React Hooks.\"), mdx(\"p\", null, \"In \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/watch?v=J-g9ZJha8FE\"\n  }, \"Tanner Linsley's 2020 JS Conf Talk\"), \" he gives a solid demonstration of how to cleanly create performant React Context for shared application state.\"), mdx(\"p\", null, \"He demonstrates a clean example of creating a global store using Context that is performant and reusable. I captured the example from this \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://codesandbox.io/s/creating-an-appcontext-with-a-makestore-multi-store-approach-f57qb\"\n  }, \"here in codesandbox\"), \" if you'd like to see it in action.\"), mdx(\"p\", null, \"The interesting approach in Tanner's example is create a nested store \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"DispatchContext\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StoreContext\"), \" that he credits \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://kentcdodds.com/blog/how-to-use-react-context-effectively\"\n  }, \"this post from Kent C. Dodds for the idea\"), \".\"), mdx(\"p\", null, \"This approach is a simple evolution of component state and can be very useful for global state such as authentication. It is flexible enough that we can create smaller stores that represent \\\"slices\\\" of state in our application and cleanly deliver that state to the components that need it with custom React Hooks.\"), mdx(\"p\", null, \"Michael Jackson gives a compelling argument against using React Context for state management in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/watch?v=3XaXKiXtNjw\"\n  }, \"this quick demonstration video\"), \". You can see \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://codesandbox.io/s/hungry-bas-ptltc\"\n  }, \"the composition approach he suggests in this codesandbox\"), \". This is an excellent approach and one that should be strongly considered before reaching for React Context.\"), mdx(\"p\", null, \"Should also note that in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://courses.reacttraining.com/p/react-hooks\"\n  }, \"Michael's amazing paid course on React Hooks\"), \" he suggests using Context for concerns like auth, so as with everything it's important to do your research and understand the tradeoffs involved!\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://egghead.io/courses/react-context-for-state-management\"\n  }, \"Dave Ceddia's React Context course on egghead\"), \" is very good if you'd like to dive deeper.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Using React Context and Custom React Hooks for State Management in React Apps","date":"May 12, 2020","banner":null,"slug":"react-context","keywords":null}}},"pageContext":{"id":"37e7ec27-1c51-5ec9-a64e-a74939e4e25b","prev":{"id":"ae70c648-e65c-5716-88df-a2ce2020c140","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"One of the challenges with state management in React is coming to terms and deciding as a team how you will categorize the layers of state in your application. It's variable and often nuanced to describe the layers but framing them in a simple…","fields":{"title":"5 Layers of State Management in React Applications","slug":"5-layers-react-state","date":"2020-05-12T00:00:00.000Z"}},"next":{"id":"2aa5a9ce-23e9-55d8-bda9-851756624a12","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"The phrase \"digital garden\" is a metaphor for thinking about writing and creating that focuses less on the resulting \"showpiece\" and more on the process, care, and craft it takes to get there. While not everybody has or works in a dirt garden, we all…","fields":{"title":"🌱 My blog is a digital garden, not a blog","slug":"digital-garden","date":"2020-05-10T00:00:00.000Z"}}}},
    "staticQueryHashes": ["1045846374"]}