{"id":110957,"date":"2020-11-12T12:29:00","date_gmt":"2020-11-12T09:29:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/4-key-learnings-from-an-experienced-react-developer\/"},"modified":"2020-11-12T12:29:00","modified_gmt":"2020-11-12T09:29:00","slug":"4-key-learnings-from-an-experienced-react-developer","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/4-key-learnings-from-an-experienced-react-developer\/","title":{"rendered":"#4 key learnings from an experienced React developer"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2d5cd581306\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2d5cd581306\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/4-key-learnings-from-an-experienced-react-developer\/#Never_stop_learning\" >Never stop learning<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/4-key-learnings-from-an-experienced-react-developer\/#Minimalism_is_your_best_friend\" >Minimalism is your best friend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/4-key-learnings-from-an-experienced-react-developer\/#Dont_be_afraid_to_refactor\" >Don\u2019t be afraid to refactor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/4-key-learnings-from-an-experienced-react-developer\/#React_has_more_than_what_you_know\" >React has more than what you know<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/4-key-learnings-from-an-experienced-react-developer\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#4 key learnings from an experienced React developer<\/strong>&#8221;<br \/>\n<img decoding=\"async\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/1-10-796x417.jpg\" \/><\/p>\n<div>\n                            Today I was reflecting on what I learned in the last few years, specifically related to programming and computer <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/sciencee\/\" data-internallinksmanager029f6b8e52c=\"5\" title=\"Science\" target=\"_blank\" rel=\"noopener\">science<\/a>. It is fair to say that I explored many new things \u2014 IoT, computer vision, deep learning, blockchain development, and more on the programming side.<\/p>\n<p>I was thinking of making a <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/watch-movies-tv-seriess\/\" data-internallinksmanager029f6b8e52c=\"8\" title=\"Watch Movies &amp; TV Series\" target=\"_blank\" rel=\"noopener\">series<\/a> of posts about my journey into all these technologies, and I wanted to start with\u00a0my journey and experience working with React. Why React? No particular reason, but it\u2019s the <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/technology\/\" data-internallinksmanager029f6b8e52c=\"4\" title=\"Technology\" target=\"_blank\" rel=\"noopener\">technology<\/a> I\u2019m working with the most lately, and I think I have a good message to pass along.<\/p>\n<p>This post will not focus on coding but rather on the lessons I learned after working with React on many projects, from small personal <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lications, to some big enterprise and other customer-facing applications.<\/p>\n<h2 id=\"never-stop-learning\"><span class=\"ez-toc-section\" id=\"Never_stop_learning\"><\/span>Never stop learning<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This section won\u2019t sound like a React specific lesson, but it\u2019s essential. So hear me out!<\/p>\n<p>Like almost anything in computer science, the only constant is change. As developers, it\u2019s part of our job to stay up to date with the best practices for programming languages, frameworks, patterns, design, etc.<\/p>\n<p>When I was starting with React, each component was a class, and we didn\u2019t have any of the \u201cfancy\u201d features such as hooks \u2014 and now I can\u2019t think of a project where I\u2019m not using them.<\/p>\n<p>The speed at which it changes forces us to be continually reading documentation and blog posts to understand what\u2019s new, why we should use it, and how. But you shouldn\u2019t think of it as a burden. All these changes are purposely introduced in frameworks and programming languages to make our lives easier or bring a better experience to the users; in all cases, it\u2019s a win-win situation.<\/p>\n<h2 id=\"minimalism-is-your-best-friend\"><span class=\"ez-toc-section\" id=\"Minimalism_is_your_best_friend\"><\/span>Minimalism is your best friend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React is all about components, and each of these components will be responsible for your application\u2019s behavior. But sometimes, the hard question is when to grow an existing component vs. when to create a new one.<\/p>\n<p>After building many applications and refactoring those same applications, I can tell that what worked best was to create components as minimal as possible. The smaller the components, the smaller complexity each of them introduces. And yes, I understand that it adds complexity when interlinked, but believe me, the benefits are far exceeding.<\/p>\n<p>I\u2019ve reviewed components with enormous states, all because a lot was happening on those components. It was so hard to read as things were mixed after refactoring. We ended with multiple components, just a few lines of code each. It was like magic, so much easier to read, to debug.<\/p>\n<p>Another advice on this same topic is to keep your side-effects and your business logic as separate from the UI as possible. I know it is sometimes tempting to solve it in the component, but if you want to save yourself some time in the future, keep them split.<\/p>\n<h2 id=\"dont-be-afraid-to-refactor\"><span class=\"ez-toc-section\" id=\"Dont_be_afraid_to_refactor\"><\/span>Don\u2019t be afraid to refactor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I\u2019ve read many times on the internet (probably <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">Reddit<\/a>) that you need to refactor because the code was terrible initially, and I couldn\u2019t disagree more. I believe that refactoring is not only necessary but a normal thing to do. I see it as your application evolving to be future proof.<\/p>\n<p>Sometimes, we refactor to make a specific function, component, or piece of code more readable and easier to understand. Just do it! In the long run, you will save yourself and your team a lot of time.<\/p>\n<p>Why you got to the situation where you need to refactor is hard to say, but here are some ideas:<\/p>\n<ul>\n<li>Library updates that introduced new patterns, concepts, ideas, or ways to solve problems.<\/li>\n<li>Code that has been growing for a while in small increments, and with time complexity grew and is now hard to maintain.<\/li>\n<li>Deprecation of features<\/li>\n<\/ul>\n<p>Embrace refactoring as a means to cleaner code, and don\u2019t be too afraid about braking things; remember that you have tests.<\/p>\n<h2 id=\"react-has-more-than-what-you-know\"><span class=\"ez-toc-section\" id=\"React_has_more_than_what_you_know\"><\/span>React has more than what you know<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React is much more than the library itself; other libraries play nicely with React that you need to learn; there are patterns, best practices, etc.<\/p>\n<p>One of React\u2019s best things is its simplicity, but it has also advanced features that perhaps you wouldn\u2019t use on every project. However, knowing them will make you a better developer and help you resolve more complex and challenging tasks.<\/p>\n<p>Explore some of the advanced features and patterns as part of your learning journey. Professionalize the library and get a deeper understanding of how it works under the hood.<\/p>\n<p>Some examples of things you can try out:<\/p>\n<ul>\n<li>References and context<\/li>\n<li>Higher-Order Components<\/li>\n<li>Advanced JS patterns and functions<\/li>\n<li>Memoization<\/li>\n<li>and others<\/li>\n<\/ul>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript and React, in particular, are unique technologies that can help you develop incredible applications. They are continuously evolving to satisfy the user needs, as developers and companies prefer to build their products.<\/p>\n<p>Staying up to date is essential, but it is not enough; experience comes from learning new things and understanding how they work.<\/p>\n<hr\/>\n<p><i><span style=\"font-weight: 400;\">This <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/post\/2020-11-03-what-i-learned-after-4-years-of-react-development\/\"><i><span style=\"font-weight: 400;\">article<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> was originally published on <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/\"><i><span style=\"font-weight: 400;\">Live Code Stream<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> by <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/bajcmartinez\/\"><i><span style=\"font-weight: 400;\">Juan Cruz Martinez<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> (twitter: <\/span><\/i><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/bajcmartinez\"><i><span style=\"font-weight: 400;\">@bajcmartinez<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.<\/span><\/i><\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/subscribe\"><i><span style=\"font-weight: 400;\">Live Code Stream<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> is also available as a free weekly <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">news<\/a>letter. Sign up for updates on everything related to programming, AI, and computer science in <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>.<\/span><\/i><\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong>\n<\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener noreferrer\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/thenextweb.com\/syndication\/2020\/11\/12\/4-key-learnings-from-an-experienced-react-developer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#4 key learnings from an experienced React developer&#8221; Today I was reflecting on what I learned in the last few years, specifically related to programming and computer science. It is fair to say that I explored many new things \u2014 IoT, computer vision, deep learning, blockchain development, and more on the programming side. I was&#8230;<\/p>\n","protected":false},"author":1,"featured_media":110958,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/img-cdn.tnwcdn.com\/image\/tnw?filter_last=1&fit=1280,640&url=https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/11\/1-10.jpg&signature=e19daa14efe80f586849d52cca2c9835","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[73821,76627,79787,70759],"class_list":["post-110957","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-developers","tag-programming-language","tag-react","tag-tech"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/110957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=110957"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/110957\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/110958"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=110957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=110957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=110957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}