{"id":78,"date":"2017-03-18T01:37:31","date_gmt":"2017-03-17T22:37:31","guid":{"rendered":"http:\/\/iamakulov.com\/notes2\/?p=78"},"modified":"2017-11-01T13:56:12","modified_gmt":"2017-11-01T10:56:12","slug":"redux-vs-react-setstate","status":"publish","type":"post","link":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/","title":{"rendered":"Redux vs React\u2019s setState()"},"content":{"rendered":"

Sometimes you can get into a situation when you\u2019re choosing between Redux and React\u2019s setState()<\/em>. When I\u2019m doing such choice, I often use the following rule of thumb.<\/p>\n

Imagine that your app can restore its state when you refresh the page.<\/p>\n

\nUse Redux if you\u2019d prefer to restore this specific piece of state.
Use setState()<\/em> if don\u2019t have this need<\/div>\n

Basically, this is about the importance of a piece of state. Is it important enough to keep it across refreshes? If yes, use Redux. If no, setState()<\/em> would do the job just fine.<\/p>\n

Here\u2019s how I\u2019d make the choise:<\/p>\n

\n\n\n\n\n\n
Redux<\/th>\nsetState()<\/i><\/th>\n<\/tr>\n
The selected value in a dropdown on a page<\/td>\nThe open\/closed state of a dropdown<\/td>\n<\/tr>\n
The current page of a book in a book reader app<\/td>\nThe visibility of toolbars in the app<\/td>\n<\/tr>\n
The current level in Angry Birds<\/td>\nThe state of birds and pigs in the current level in Angry Birds<\/td>\n<\/tr>\n<\/table>\n<\/div>\n

For me, the state in the left column is important, and the state in the right column is not. Your app can require a different decision.<\/p>\n

This criterion is not universal \u2013 i.e. sometimes you might need to put the \u201cdropdown is open\u201d state into the store because you change another component\u2019s styles based on this. But for me, it works in most cases.<\/p>\n

\n

Posting this on Reddit<\/a> triggered a great comment:<\/p>\n

\n Redux = data grabbing and global state that’s shared across more than one component.
\n setState = silo’ed state that is isolated from other components.
\n \u2013 jiblet84<\/a>\n<\/p><\/blockquote>\n

Yes! Another (and probably more common, as I\u2019m realizing after receiving the feedback) criterion for choosing between Redux and setState()<\/em> is how global the state is. So here\u2019s another approach:<\/p>\n

Use Redux if your state is shared across multiple components. Use setState()<\/em> if it\u2019s used only in a single component.<\/mark><\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes you can get into a situation when you\u2019re choosing between Redux and React\u2019s setState(). When I\u2019m doing such choice, I often use the following rule of thumb. Imagine that your app can restore its state when you refresh the page. Use Redux if you\u2019d prefer to restore this specific piece of state.Use setState() if … Continue reading “Redux vs React\u2019s setState()”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7,11],"class_list":["post-78","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-react","tag-redux"],"yoast_head":"\nRedux vs React\u2019s setState() - Ivan Akulov\u2019s blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Redux vs React\u2019s setState()\" \/>\n<meta property=\"og:description\" content=\"How to choose one of them\" \/>\n<meta property=\"og:url\" content=\"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/\" \/>\n<meta property=\"og:site_name\" content=\"Ivan Akulov\u2019s blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/iamakulov.page\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-17T22:37:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-01T10:56:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/iamakulov.com\/notes2\/wp-content\/uploads\/2017\/05\/ApplicationFrameHost_2017-03-18_01-39-07-21.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1332\" \/>\n\t<meta property=\"og:image:height\" content=\"646\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ivan Akulov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Redux vs React\u2019s setState()\" \/>\n<meta name=\"twitter:description\" content=\"How to choose one of them\" \/>\n<meta name=\"twitter:image\" content=\"http:\/\/iamakulov.com\/notes2\/wp-content\/uploads\/2017\/05\/ApplicationFrameHost_2017-03-18_01-39-07-21.png\" \/>\n<meta name=\"twitter:creator\" content=\"@iamakulov\" \/>\n<meta name=\"twitter:site\" content=\"@iamakulov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ivan Akulov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/\",\"url\":\"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/\",\"name\":\"Redux vs React\u2019s setState() - Ivan Akulov\u2019s blog\",\"isPartOf\":{\"@id\":\"https:\/\/iamakulov.com\/notes\/#website\"},\"datePublished\":\"2017-03-17T22:37:31+00:00\",\"dateModified\":\"2017-11-01T10:56:12+00:00\",\"author\":{\"@id\":\"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81\"},\"breadcrumb\":{\"@id\":\"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/iamakulov.com\/notes\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Redux vs React\u2019s setState()\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/iamakulov.com\/notes\/#website\",\"url\":\"https:\/\/iamakulov.com\/notes\/\",\"name\":\"Ivan Akulov\u2019s blog\",\"description\":\"Ivan Akulov writes about his front-end experience, React, webpack, and performance optimizations.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/iamakulov.com\/notes\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81\",\"name\":\"Ivan Akulov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/aec4e9e944911b58f2c3d14b7f9e5412a217e5738359c3f52e824b4de2b2263c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/aec4e9e944911b58f2c3d14b7f9e5412a217e5738359c3f52e824b4de2b2263c?s=96&d=mm&r=g\",\"caption\":\"Ivan Akulov\"},\"description\":\"I'm a software engineer specializing in web performance, JavaScript, and React. I\u2019m also a Google Developer Expert. I work at Framer.\",\"sameAs\":[\"http:\/\/iamakulov.com\",\"https:\/\/x.com\/iamakulov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Redux vs React\u2019s setState() - Ivan Akulov\u2019s blog","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:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/","og_locale":"en_US","og_type":"article","og_title":"Redux vs React\u2019s setState()","og_description":"How to choose one of them","og_url":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/","og_site_name":"Ivan Akulov\u2019s blog","article_publisher":"http:\/\/facebook.com\/iamakulov.page","article_published_time":"2017-03-17T22:37:31+00:00","article_modified_time":"2017-11-01T10:56:12+00:00","og_image":[{"width":1332,"height":646,"url":"https:\/\/iamakulov.com\/notes2\/wp-content\/uploads\/2017\/05\/ApplicationFrameHost_2017-03-18_01-39-07-21.png","type":"image\/png"}],"author":"Ivan Akulov","twitter_card":"summary_large_image","twitter_title":"Redux vs React\u2019s setState()","twitter_description":"How to choose one of them","twitter_image":"http:\/\/iamakulov.com\/notes2\/wp-content\/uploads\/2017\/05\/ApplicationFrameHost_2017-03-18_01-39-07-21.png","twitter_creator":"@iamakulov","twitter_site":"@iamakulov","twitter_misc":{"Written by":"Ivan Akulov","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/","url":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/","name":"Redux vs React\u2019s setState() - Ivan Akulov\u2019s blog","isPartOf":{"@id":"https:\/\/iamakulov.com\/notes\/#website"},"datePublished":"2017-03-17T22:37:31+00:00","dateModified":"2017-11-01T10:56:12+00:00","author":{"@id":"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81"},"breadcrumb":{"@id":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/iamakulov.com\/notes\/"},{"@type":"ListItem","position":2,"name":"Redux vs React\u2019s setState()"}]},{"@type":"WebSite","@id":"https:\/\/iamakulov.com\/notes\/#website","url":"https:\/\/iamakulov.com\/notes\/","name":"Ivan Akulov\u2019s blog","description":"Ivan Akulov writes about his front-end experience, React, webpack, and performance optimizations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/iamakulov.com\/notes\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81","name":"Ivan Akulov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/aec4e9e944911b58f2c3d14b7f9e5412a217e5738359c3f52e824b4de2b2263c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/aec4e9e944911b58f2c3d14b7f9e5412a217e5738359c3f52e824b4de2b2263c?s=96&d=mm&r=g","caption":"Ivan Akulov"},"description":"I'm a software engineer specializing in web performance, JavaScript, and React. I\u2019m also a Google Developer Expert. I work at Framer.","sameAs":["http:\/\/iamakulov.com","https:\/\/x.com\/iamakulov"]}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":10,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":831,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/posts\/78\/revisions\/831"}],"wp:attachment":[{"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iamakulov.com\/notes\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}