{"id":2859,"date":"2019-06-08T14:58:39","date_gmt":"2019-06-08T14:58:39","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=2859"},"modified":"2023-07-18T11:58:39","modified_gmt":"2023-07-18T15:58:39","slug":"a-state-management-pattern-for-ionic-react-with-react-hooks","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks","title":{"rendered":"A state management pattern for Ionic React with React Hooks"},"content":{"rendered":"

How to manage state in your app can often be the biggest and most impactful architectural decision you make.<\/p>\n

Unfortunately, there is no standard practice for state management. Developers have to choose between a wide variety of techniques and libraries (many of them 3rd party), including Redux, MobX, state “tunneling,” singleton state services, or just hacking it together. Some of these solutions are optimized for large apps, and some for small ones.<\/p>\n

With React Hooks, however, we finally have a state management technique that is both native to the framework, and a good fit for a huge swathe of apps (except, perhaps, very large ones).<\/p>\n

If you aren’t familiar with Hooks in React, go read our introduction to Using React Hooks in Ionic React<\/a>, it offers a primer on the new APIs and how to build basic apps with them. We will gloss over that in this post.<\/p>\n

Let’s jump in.<\/p>\n

<\/p>\n

State Management With React Hooks<\/h2>\n

React now ships with a number of hooks, including two that we can use to build a powerful state management system right into our app: useContext<\/a> and useReducer<\/a>.<\/p>\n

At the risk of oversimplifying, a simple state management system has a few desirable properties: 1) it’s global, so state is managed in one place instead of all over your app and 2) individual components don’t modify or mutate<\/em> state themselves, but rather emit “actions” to the state management system which can then mutate the state, causing the tree of components to update if necessary.<\/p>\n

If you recognize redux in the above, congratulations! That’s effectively what we’re going to build with React Hooks.<\/p>\n

The Pattern<\/h2>\n

Okay, let’s get to the pattern. We’re going to build our state management system in one file called State.jsx<\/code> (or tsx<\/code> if using TypeScript):<\/p>\n

import React, { createContext, useReducer } from "react";\n\nlet AppContext = createContext();\n\nconst initialState = {\n  count: 0\n}\n\nlet reducer = (state, action) => {\n  switch(action.type) {\n    case "setCount": {\n      return { ...state, count: action.user }\n    }\n  }\n  return state;\n};\n\nfunction AppContextProvider(props) {\n  const fullInitialState = {\n    ...initialState,\n  }\n\n  let [state, dispatch] = useReducer(reducer, fullInitialState);\n  let value = { state, dispatch };\n\n\n  return (\n    <AppContext.Provider value={value}>{props.children}<\/AppContext.Provider>\n  );\n}\n\nlet AppContextConsumer = AppContext.Consumer;\n\nexport { AppContext, AppContextProvider, AppContextConsumer };\n<\/code><\/pre>\n
In this file, we set up our Context<\/a>, which our child components will access with the useContext<\/code> hook. When they do this, they will have access to two things that we’ve set as the value<\/code> on our AppContext.Provider<\/code>: state<\/code> and our dispatch<\/code> function. Which are returned from calling the useReducer<\/code> hook. state<\/code> is the current global state, which can be used for rendering\/etc., and dispatch<\/code> allows components to emit actions that our reducer<\/code> function will process to turn into a new state object.<\/p>\n
The reducer<\/code> function takes two arguments: the current state, and the action that was performed. It then returns a new<\/em> state object that contains any differences after processing the action.<\/p>\n
Let’s take a look at an example component to see how we’d use this:<\/p>\n
import React, { useContext } from 'react';\nimport { IonButton } from '@ionic\/react';\nimport { AppContext } from '..\/State';\n\nexport const MyComponent = () => {\n  const { state, dispatch } = useContext(AppContext);\n\n  return (\n    <div>\n      <IonButton onClick={() => dispatch({\n        type: 'setCount',\n        count: state.count + 1\n      })}>\n        Add to Order\n      <\/IonButton>\n      <h2>You have {state.count} in your cart<\/h2>\n    <\/div>\n  )\n}\n<\/code><\/pre>\n
That’s pretty much it for the basic state management pattern! Our components access state from the Context and dispatch actions to the reducer, which in turn updates the global state, which causes components to re-render. Pretty simple!<\/p>\n
There are a few other things we can add to our state management system to make it even more powerful, though.<\/p>\n
Logging<\/h2>\n
A common need for state management is logging actions for debugging purposes.<\/p>\n
Logging can be done very simply by wrapping the reducer function with a simple logging function and using that function as the argument to useReducer<\/code> instead of the original reducer<\/code> function:<\/p>\n
const logger = (reducer) => {\n  const reducerWithLogger = (state, action) => {\n    console.log("%cPrevious State:", "color: #9E9E9E; font-weight: 700;", state);\n    console.log("%cAction:", "color: #00A7F7; font-weight: 700;", action);\n    console.log("%cNext State:", "color: #47B04B; font-weight: 700;", reducer(state,action));\n    return reducer(state,action);\n  };\n  return reducerWithLogger;\n}\n\nconst loggerReducer = logger(reducer);\n\nfunction AppContextProvider(props) {\n  \/\/ ...\n  let [state, dispatch] = useReducer(loggerReducer, fullInitialState)\n  \/\/ ...\n}\n<\/code><\/pre>\n
Resulting in helpful log info like this:<\/p>\n
\"\"
Persistence<\/h2>\n
Another common need for a state management system is persistence, either of the entire state or a subset of it.<\/p>\n
We can achieve this in a simple way using localStorage<\/code> and adding a few lines of code to our state system:<\/p>\n
\nconst initialState = {...}\n\nconst persistedState = JSON.parse(window.localStorage['persistedState']);\n\nfunction AppContextProvider(props) {\n  const fullInitialState = {\n    ...initialState,\n    ...persistedState\n  }\n  \/\/ ...\n}\n<\/code><\/pre>\n
This first setups up the initial state to contain any data we’ve persisted in persistedState<\/code>.<\/p>\n
Then, to keep the persisted data up to date when state changes, we can use useEffect<\/code> which will run every time our state is updated. In this example we’re persisting a new state.user<\/code> field which might contain a user’s session token:<\/p>\n
function AppContextProvider(props) {\n  const fullInitialState = {\n    ...initialState,\n    ...persistedState\n  }\n\n  let [state, dispatch] = useReducer(loggerReducer, fullInitialState);\n\n  useEffect(() => {\n    \/\/ Persist any state we want to\n    window.localStorage['persistedState'] = JSON.stringify({\n      user: state.user\n    });\n  }, [state]);\n  \/\/ ...\n}\n<\/code><\/pre>\n
This will let us keep specific fields in our state persisted if they change, and load them back when the app starts up again. In that sense, the persistence is reactive and we don’t have to think about it. Note: using localStorage<\/code> is bad for anything that needs to live for a long time as the browser\/OS may clean it up. It’s perfectly fine for temporary data, however.<\/p>\n
Conclusion<\/h2>\n
There you have it, a simple pattern for state management in Ionic React with React hooks. There are simpler state management patterns, to be sure, but I feel this strikes a nice balance between being simple enough for basic apps, and complex enough for decent sized ones, too. If I were going to build a Very Serious app, I’d probably still use Redux to benefit from the various libraries and techniques available there.<\/p>\n
I like this pattern so much I’ve used it now on three different Ionic React apps. Much like a sourdough starter, I copy this state management system for each new app I build.<\/p>\n
What do you think? Do you like this pattern? Could something be improved or tweaked? Let us know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"
How to manage state in your app can often be the biggest and most impactful architectural decision you make. Unfortunately, there is no standard practice for state management. Developers have to choose between a wide variety of techniques and libraries (many of them 3rd party), including Redux, MobX, state “tunneling,” singleton state services, or just […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[107,136,149],"class_list":["post-2859","post","type-post","status-publish","format-standard","hentry","category-engineering","tag-ionic-4","tag-react","tag-react-hooks"],"acf":[],"yoast_head":"\nA state management pattern for Ionic React with React Hooks - Ionic Blog<\/title>\n<meta name=\"description\" content=\"With React Hooks we finally have a state management technique that is both native to the framework, and a good fit for a huge swathe of apps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A state management pattern for Ionic React with React Hooks\" \/>\n<meta property=\"og:description\" content=\"With React Hooks we finally have a state management technique that is both native to the framework, and a good fit for a huge swathe of apps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-08T14:58:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:58:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM-300x50.png\" \/>\n<meta name=\"author\" content=\"Max Lynch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@maxlynch\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Max Lynch\" \/>\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:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks\"},\"author\":{\"name\":\"Max Lynch\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\"},\"headline\":\"A state management pattern for Ionic React with React Hooks\",\"datePublished\":\"2019-06-08T14:58:39+00:00\",\"dateModified\":\"2023-07-18T15:58:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks\"},\"wordCount\":833,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM-300x50.png\",\"keywords\":[\"Ionic 4\",\"react\",\"react hooks\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks\",\"url\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks\",\"name\":\"A state management pattern for Ionic React with React Hooks - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM-300x50.png\",\"datePublished\":\"2019-06-08T14:58:39+00:00\",\"dateModified\":\"2023-07-18T15:58:39+00:00\",\"description\":\"With React Hooks we finally have a state management technique that is both native to the framework, and a good fit for a huge swathe of apps.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM.png\",\"width\":828,\"height\":138},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A state management pattern for Ionic React with React Hooks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\",\"name\":\"Max Lynch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"caption\":\"Max Lynch\"},\"description\":\"CEO\",\"sameAs\":[\"http:\/\/twitter.com\/maxlynch\",\"https:\/\/x.com\/maxlynch\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/max\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A state management pattern for Ionic React with React Hooks - Ionic Blog","description":"With React Hooks we finally have a state management technique that is both native to the framework, and a good fit for a huge swathe of apps.","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:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks","og_locale":"en_US","og_type":"article","og_title":"A state management pattern for Ionic React with React Hooks","og_description":"With React Hooks we finally have a state management technique that is both native to the framework, and a good fit for a huge swathe of apps.","og_url":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks","og_site_name":"Ionic Blog","article_published_time":"2019-06-08T14:58:39+00:00","article_modified_time":"2023-07-18T15:58:39+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM-300x50.png"}],"author":"Max Lynch","twitter_card":"summary_large_image","twitter_creator":"@maxlynch","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Max Lynch","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks"},"author":{"name":"Max Lynch","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e"},"headline":"A state management pattern for Ionic React with React Hooks","datePublished":"2019-06-08T14:58:39+00:00","dateModified":"2023-07-18T15:58:39+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks"},"wordCount":833,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM-300x50.png","keywords":["Ionic 4","react","react hooks"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks","url":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks","name":"A state management pattern for Ionic React with React Hooks - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM-300x50.png","datePublished":"2019-06-08T14:58:39+00:00","dateModified":"2023-07-18T15:58:39+00:00","description":"With React Hooks we finally have a state management technique that is both native to the framework, and a good fit for a huge swathe of apps.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/06\/Screen-Shot-2019-06-08-at-9.45.12-AM.png","width":828,"height":138},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/a-state-management-pattern-for-ionic-react-with-react-hooks#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"A state management pattern for Ionic React with React Hooks"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e","name":"Max Lynch","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","caption":"Max Lynch"},"description":"CEO","sameAs":["http:\/\/twitter.com\/maxlynch","https:\/\/x.com\/maxlynch"],"url":"https:\/\/ionic.io\/blog\/author\/max"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2859"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2859\/revisions"}],"predecessor-version":[{"id":5498,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2859\/revisions\/5498"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}