{"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":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"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\/notes\/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\/notes\/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\":\"Article\",\"@id\":\"https:\\\/\\\/iamakulov.com\\\/notes\\\/redux-vs-react-setstate\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/iamakulov.com\\\/notes\\\/redux-vs-react-setstate\\\/\"},\"author\":{\"name\":\"Ivan Akulov\",\"@id\":\"https:\\\/\\\/iamakulov.com\\\/notes\\\/#\\\/schema\\\/person\\\/ebf7b61bf573e7be5fe438f50ebd9b81\"},\"headline\":\"Redux vs React\u2019s setState()\",\"datePublished\":\"2017-03-17T22:37:31+00:00\",\"dateModified\":\"2017-11-01T10:56:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/iamakulov.com\\\/notes\\\/redux-vs-react-setstate\\\/\"},\"wordCount\":317,\"commentCount\":2,\"keywords\":[\"react\",\"redux\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/iamakulov.com\\\/notes\\\/redux-vs-react-setstate\\\/#respond\"]}]},{\"@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:\\\/\\\/secure.gravatar.com\\\/avatar\\\/aec4e9e944911b58f2c3d14b7f9e5412a217e5738359c3f52e824b4de2b2263c?s=96&d=mm&r=g\",\"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\/notes\/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\/notes\/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":"Article","@id":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/#article","isPartOf":{"@id":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/"},"author":{"name":"Ivan Akulov","@id":"https:\/\/iamakulov.com\/notes\/#\/schema\/person\/ebf7b61bf573e7be5fe438f50ebd9b81"},"headline":"Redux vs React\u2019s setState()","datePublished":"2017-03-17T22:37:31+00:00","dateModified":"2017-11-01T10:56:12+00:00","mainEntityOfPage":{"@id":"https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/"},"wordCount":317,"commentCount":2,"keywords":["react","redux"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/iamakulov.com\/notes\/redux-vs-react-setstate\/#respond"]}]},{"@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:\/\/secure.gravatar.com\/avatar\/aec4e9e944911b58f2c3d14b7f9e5412a217e5738359c3f52e824b4de2b2263c?s=96&d=mm&r=g","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_shortlink":"https:\/\/wp.me\/p8Hto2-1g","jetpack-related-posts":[{"id":1449,"url":"https:\/\/iamakulov.com\/notes\/case-study-analyzing-notions-app-performance\/","url_meta":{"origin":78,"position":0},"title":"Case study: Analyzing Notion\u2019s app performance","author":"Ivan Akulov","date":"June 9, 2020","format":"link","excerpt":"Here\u2019s another case study of mine! (The previous one was as far as two years ago, and it was about Walmart.) Notion is an advanced note-taking app written with React and Electron. In this case study, I look at how to improve its startup time by ~30% \u2013 by removing\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1065,"url":"https:\/\/iamakulov.com\/notes\/walmart\/","url_meta":{"origin":78,"position":1},"title":"Case study: analyzing the Walmart site performance","author":"Ivan Akulov","date":"April 27, 2018","format":false,"excerpt":"Walmart is one of the top USA e-commerce retailers. In 2016, they were the second after Amazon by sales. In e-commerce, the conversion is directly affected by how fast the site loads. For many e-commerce companies, making the site faster by 1 second increased the conversion 1.05, 1.1, or even\u2026","rel":"","context":"In \"performance\"","block_context":{"text":"performance","link":"https:\/\/iamakulov.com\/notes\/tag\/performance\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2018\/04\/ApplicationFrameHost_2018-03-30_21-12-46.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2018\/04\/ApplicationFrameHost_2018-03-30_21-12-46.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2018\/04\/ApplicationFrameHost_2018-03-30_21-12-46.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2018\/04\/ApplicationFrameHost_2018-03-30_21-12-46.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2018\/04\/ApplicationFrameHost_2018-03-30_21-12-46.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2018\/04\/ApplicationFrameHost_2018-03-30_21-12-46.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1453,"url":"https:\/\/iamakulov.com\/notes\/lessons-from-self-employment\/","url_meta":{"origin":78,"position":2},"title":"Lessons From Six Years of Self-Employment","author":"Ivan Akulov","date":"February 4, 2024","format":false,"excerpt":"From 2017 to 2023, I worked as a self-employed web performance consultant. I was lucky to do some cool stuff (work with Google and another company every American knows, help many hot startups, speak at worldwide conferences). In 2024, I turned that page and became an employee at Framer, to\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-21-at-21.35.38.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-21-at-21.35.38.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-21-at-21.35.38.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-21-at-21.35.38.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-21-at-21.35.38.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/iamakulov.com\/notes\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-21-at-21.35.38.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"jetpack_sharing_enabled":true,"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}]}}