{"id":270954,"date":"2018-05-29T07:04:29","date_gmt":"2018-05-29T14:04:29","guid":{"rendered":"http:\/\/css-tricks.com\/?p=270954"},"modified":"2018-05-29T07:04:29","modified_gmt":"2018-05-29T14:04:29","slug":"managing-state-in-react-with-unstated","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/managing-state-in-react-with-unstated\/","title":{"rendered":"Managing State in React With Unstated"},"content":{"rendered":"<p>As your application becomes more complex, the management of state can become tedious. A component&#8217;s state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application is, <a href=\"https:\/\/medium.com\/@dan_abramov\/you-might-not-need-redux-be46360cf367\" rel=\"noopener\">you might not need Redux<\/a>.<\/p>\n<p><a href=\"https:\/\/github.com\/jamiebuilds\/unstated\" rel=\"noopener\">Unstated<\/a> is an alternative that provides you with the functionality to manage state across multiple components with a Container class and Provider and Subscribe components. Let&#8217;s see Unstated in action by creating a simple counter and then look at a more advanced to-do application.<\/p>\n<p><!--more--><\/p>\n<h3>Using Unstated to Create a Counter<\/h3>\n<p><iframe src=\"https:\/\/codesandbox.io\/embed\/github\/kinsomicrote\/unstated-counter\/tree\/master\/\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"><\/iframe><\/p>\n<p>The code for the counter we\u2019re making is available on GitHub:<\/p>\n<p><a class=\"button\" href=\"https:\/\/github.com\/kinsomicrote\/unstated-counter\" rel=\"noopener\">View Repo<\/a><\/p>\n<p>You can add Unstated to your application with Yarn:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markup\">yarn add unstated<\/code><\/pre>\n<h4>Container<\/h4>\n<p>The container extends Unstated&#8217;s <code>Container<\/code> class. It is to be used only for state management. This is where the initial state will be initialized and the <a href=\"https:\/\/css-tricks.com\/understanding-react-setstate\/\">call to <code>setState()<\/code><\/a> will happen.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import { Container } from 'unstated'\r\n\r\nclass CounterContainer extends Container {\r\n  state = {\r\n    count: 0\r\n  }\r\n\r\n  increment = () =&gt; {\r\n    this.setState({ count: this.state.count + 1 })\r\n  }\r\n\r\n  decrement = () =&gt; {\r\n    this.setState({ count: this.state.count - 1 })\r\n  }\r\n}\r\n\r\nexport default CounterContainer<\/code><\/pre>\n<p>So far, we\u2019ve defined the Container (<code>CounterContainer<\/code>), set its starting state for <code>count<\/code> at the number zero and defined methods for adding and subtracting to the component&#8217;s state in increments and decrements of one.<\/p>\n<p>You might be wondering why we haven\u2019t imported React at this point. There is no need to import it into the Container since we will not be rendering JSX at all.<\/p>\n<p>Events emitters will be used in order to call <code>setState()<\/code> and cause the components to re-render. The components that will make use of this container will have to subscribe to it.<\/p>\n<h4>Subscribe<\/h4>\n<p>The Subscribe component is used to plug the state into the components that need it. From here, we will be able to call the increment and decrement methods, which will update the state of the application and cause the subscribed component to re-render with the correct count. These methods will be triggered by a couple of buttons that contain events listeners to add or subtract to the count, respectively.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import React from 'react'\r\nimport { Subscribe } from 'unstated'\r\n\r\nimport CounterContainer from '.\/containers\/counter'\r\n\r\nconst Counter = () =&gt; {\r\n  return (\r\n    &lt;Subscribe to={[CounterContainer]}&gt;\r\n      {counterContainer =&gt; (\r\n        &lt;div&gt;\r\n          &lt;div&gt;\r\n            \/\/ The current count value\r\n            Count: { counterContainer.state.count }\r\n          &lt;\/div&gt;\r\n          \/\/ This button will add to the count\r\n          &lt;button onClick={counterContainer.increment}&gt;Increment&lt;\/button&gt;\r\n          \/\/ This button will subtract from the count\r\n          &lt;button onClick={counterContainer.decrement}&gt;Decrement&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n      )}\r\n    &lt;\/Subscribe&gt;\r\n  )\r\n}\r\n\r\nexport default Counter<\/code><\/pre>\n<p>The Subscribe component is given the <strong>CounterContainer<\/strong> in the form of an array to its <code>to<\/code> prop. This means that the Subscribe component can subscribe to more than one container, and all of the containers are passed to the <code>to<\/code> prop of the Subscribe component in an array.<\/p>\n<p>The <code>counterContainer<\/code> is a function that receives an instance of each container the Subscribe component subscribes to.<\/p>\n<p>With that, we can now access the state and the methods made available in the container.<\/p>\n<h4>Provider<\/h4>\n<p>We&#8217;ll make use of the Provider component to store the container instances and allow the children to subscribe to it.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import React, { Component } from 'react';\r\nimport { Provider } from 'unstated'\r\n\r\nimport Counter from '.\/Counter'\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      &lt;Provider&gt;\r\n        &lt;Counter \/&gt;\r\n      &lt;\/Provider&gt;\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n<p>With this, the Counter component can make use of our <code>counterContainer<\/code>.<\/p>\n<p>Unstated allows you to make use of all the functionality that <a href=\"https:\/\/css-tricks.com\/understanding-react-setstate\/\">React&#8217;s <code>setState()<\/code><\/a> provides. For example, if we want to increment the previous state by one three times with one click, we can pass a function to <code>setState()<\/code> like this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">incrementBy3 = () =&gt; {\r\n  this.setState((prevState) =&gt; ({ count: prevState.count + 1 }))\r\n  this.setState((prevState) =&gt; ({ count: prevState.count + 1 }))\r\n  this.setState((prevState) =&gt; ({ count: prevState.count + 1 }))\r\n}<\/code><\/pre>\n<p>The idea is that the <code>setState()<\/code> still works like it does, but this time with the ability to keep the state contained in a Container class. It becomes easy to spread the state to only the components that need it.<\/p>\n<h3>Let\u2019s Make a To-Do Application!<\/h3>\n<p><iframe src=\"https:\/\/codesandbox.io\/embed\/github\/kinsomicrote\/unstated-todo\/tree\/master\/\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"><\/iframe><\/p>\n<p>This is a slightly more advanced use of Unstated. Two components will subscribe to the container, which will manage all of the state, and the methods for updating the state. Again, the code is available on Github:<\/p>\n<p><a class=\"button\" href=\"https:\/\/github.com\/kinsomicrote\/unstated-todo\" rel=\"noopener\">View Repo<\/a><\/p>\n<p>The container will look like this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import { Container } from 'unstated'\r\n\r\nclass TodoContainer extends Container {\r\n  state = {\r\n    todos: [\r\n      'Mess around with unstated',\r\n      'Start dance class'\r\n    ],\r\n    todo: ''\r\n  };\r\n\r\n  handleDeleteTodo = (todo) =&gt; {\r\n    this.setState({\r\n      todos: this.state.todos.filter(c =&gt; c !== todo)\r\n    })\r\n  }\r\n \r\n  handleInputChange = (event) =&gt; {\r\n    const todo = event.target.value\r\n    this.setState({ todo });\r\n  };\r\n\r\n  handleAddTodo = (event) =&gt; {\r\n    event.preventDefault()\r\n    this.setState(({todos}) =&gt; ({\r\n      todos: todos.concat(this.state.todo)\r\n    }))\r\n    this.setState({ todo: '' });\r\n  }\r\n\r\n}\r\n\r\nexport default TodoContainer<\/code><\/pre>\n<p>The container has an initial <code>todos<\/code> state which is an array with two items in it. To add to-do items, we have a <code>todo<\/code> state set to an empty string.<\/p>\n<p>We\u2019re going to need a <strong>CreateTodo<\/strong> component that will subscribe to the container. Each time a value is entered, the <code>onChange<\/code> event will trigger then fire the <code>handleInputChange()<\/code> method we have in the container. Clicking the submit button will trigger <code>handleAddTodo()<\/code>. The <code>handleDeleteTodo()<\/code> method receives a to-do and filters out the to-do that matches the one passed to it.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import React from 'react'\r\nimport { Subscribe } from 'unstated'\r\n\r\nimport TodoContainer from '.\/containers\/todoContainer'\r\n\r\nconst CreateTodo = () =&gt; {\r\n  return (\r\n    &lt;div&gt;\r\n      &lt;Subscribe to={[TodoContainer]}&gt;\r\n        {todos =&gt;\r\n          &lt;div&gt;\r\n            &lt;form onSubmit={todos.handleAddTodo}&gt;\r\n              &lt;input\r\n                type=\"text\"\r\n                value={todos.state.todo}\r\n                onChange={todos.handleInputChange}\r\n              \/&gt;\r\n              &lt;button&gt;Submit&lt;\/button&gt;\r\n            &lt;\/form&gt;\r\n          &lt;\/div&gt;\r\n        }\r\n      &lt;\/Subscribe&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default CreateTodo<\/code><\/pre>\n<p>When a new to-do is added, the <code>todos<\/code> state made available in the container is updated. The list of todos is pulled from the container to the <strong>Todos<\/strong> component, by subscribing the component to the container.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import React from 'react';\r\nimport { Subscribe } from 'unstated';\r\n\r\nimport TodoContainer from '.\/containers\/todoContainer'\r\n\r\nconst Todos = () =&gt; (\r\n  &lt;ul&gt;\r\n    &lt;Subscribe to={[TodoContainer]}&gt;\r\n      {todos =&gt;\r\n        todos.state.todos.map(todo =&gt; (\r\n          &lt;li key={todo}&gt;\r\n            {todo} &lt;button onClick={() =&gt; todos.handleDeleteTodo(todo)}&gt;X&lt;\/button&gt;\r\n          &lt;\/li&gt;\r\n        ))\r\n      }\r\n    &lt;\/Subscribe&gt;\r\n  &lt;\/ul&gt;\r\n);\r\n\r\nexport default Todos<\/code><\/pre>\n<p>This component loops through the array of to-dos available in the container and renders them in a list.<\/p>\n<p>Finally, we need to wrap the components that subscribe to the container in a provider like we did in the case of the counter. We do this in our <strong>App.js<\/strong> file exactly like we did in the counter example:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import React, { Component } from 'react';\r\nimport { Provider } from 'unstated'\r\n\r\nimport CreateTodo from '.\/CreateTodo'\r\nimport Todos from '.\/Todos'\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      &lt;Provider&gt;\r\n        &lt;CreateTodo \/&gt;\r\n        &lt;Todos \/&gt;\r\n      &lt;\/Provider&gt;\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;<\/code><\/pre>\n<h3>Wrapping Up<\/h3>\n<p>There are different ways of <a href=\"https:\/\/blog.kentcdodds.com\/application-state-management-66de608ccb24\" rel=\"noopener\">managing state<\/a> in React depending on the complexity of your application and Unstated is a handy library that can make it easier. It\u2019s worth reiterating the point that Redux, while awesome, is not always the best tool for the job, even though we often grab for it in these types of cases. Hopefully you now feel like you have a new tool in your belt.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As your application becomes more complex, the management of state can become tedious. A component&#8217;s state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application is, you might not need Redux. Unstated [&hellip;]<\/p>\n","protected":false},"author":251966,"featured_media":270958,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Unstated is another way to manage state in React.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[557,1114,1093],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unstated.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":289062,"url":"https:\/\/css-tricks.com\/managing-state-in-react-using-unstated-next\/","url_meta":{"origin":270954,"position":0},"title":"Managing State in React using Unstated-Next","date":"June 17, 2019","format":false,"excerpt":"In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React\u2019s built-in setState to allow you create components that can consume state by subscribing to a provider \u2014 like the React\u2019s Context API. Well, we\u2019re going to build off that last post\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unstated.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330280,"url":"https:\/\/css-tricks.com\/old-is-solid-new-gets-talked-about\/","url_meta":{"origin":270954,"position":1},"title":"Old is Solid; New Gets Talked About","date":"December 15, 2020","format":false,"excerpt":"When Chris asked me to write about \"one thing I learned about building websites this year\" I admit my brain immediately went through a list of techniques and CSS properties I started using this year. But then I paused. Other people can write about that much better than I can.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-15-at-11.58.28-AM.png?fit=1200%2C597&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302303,"url":"https:\/\/css-tricks.com\/understanding-immutability-in-javascript\/","url_meta":{"origin":270954,"position":2},"title":"Understanding Immutability in JavaScript","date":"January 30, 2020","format":false,"excerpt":"If you haven\u2019t worked with immutability in JavaScript before, you might find it easy to confuse it with assigning a variable to a new value, or reassignment. While it\u2019s possible to reassign variables and values declared using let or var, you'll begin to run into issues when you try that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/javascript-v4.png?fit=1200%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":239814,"url":"https:\/\/css-tricks.com\/learning-react-redux\/","url_meta":{"origin":270954,"position":3},"title":"Leveling Up with React: Redux","date":"March 28, 2016","format":false,"excerpt":"This tutorial is the final of a three-part series by Brad Westfall. We'll learn how to manage state across an entire application efficiently and in a way that can scale without dangerous complexity. We've come so far in our React journey, it's worth making it across the finish line here\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366452,"url":"https:\/\/css-tricks.com\/different-ways-to-write-css-in-react\/","url_meta":{"origin":270954,"position":4},"title":"Different Ways to Write CSS in React","date":"June 22, 2022","format":false,"excerpt":"We\u2019re all familiar with the standard way of linking up a stylesheet to the <head> of an HTML doc, right? That\u2019s just one of several ways we\u2019re able to write CSS. But what does it look like to style things in a single-page application (SPA), say in a React project?\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366770,"url":"https:\/\/css-tricks.com\/react-hooks-the-deep-cuts\/","url_meta":{"origin":270954,"position":5},"title":"React Hooks: The Deep Cuts","date":"July 13, 2022","format":false,"excerpt":"Hooks are reusable functions. They allow you to use state and other features (e.g. lifecycle methods and so on) without writing a class. Hook functions let us \u201chook into\u201d the React state lifecycle using functional components, allowing us to manipulate the state of our functional components without needing to convert\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/react-hook.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270954"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/251966"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=270954"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270954\/revisions"}],"predecessor-version":[{"id":271499,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/270954\/revisions\/271499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/270958"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=270954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=270954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}