I used React wrong for years, upgrade your code with React Hooks.

<p>Use React Hooks to decouple your code from presentation and logic to achieve higher reusability and maintainability.</p> <p>I have been working with React for several years now and have optimized my programming skills in this framework over time. When I first started, I didn&rsquo;t really understand the concept of hooks and got used to ignoring them. In the meantime, I changed my mind and this article explains why you should use hooks.</p> <p>To give you some context, we have a presentation component called LoadingButton, it is a simple button that can switch its state from loading (showing a progress circle) to a normal button. In our scenario, we want to execute an async function, that sets the state to loading during the execution. To simplify the state handling we want to create an additional small helper utility that does the handling for us.</p> <p>It not only looks more beautiful, but it also gives some great advantages to improve the overall code of the application.</p> <h2>Decoupling</h2> <p>In the first example, I was completely dependent on the lower-level &ldquo;LoadingButton&rdquo; component making a replacement more difficult. With the separation, I am more flexible in comparing it with other functionalities.</p> <h2>Reusability</h2> <p>With the first example, it is also not possible to share the code with another component. In the new example, I can use the hook for every component I want, making it great for reusability.</p> <h2>Hook stacking &amp; further logic decoupling</h2> <p>Another great advantage is that it lets you further separate your logic by stacking hooks inside each other making the code extremely clean and maintainable (I prefer to put my entire logic inside a &ldquo;controller&rdquo; hook).&nbsp;</p> <p><a href="https://medium.com/@davide-wietlisbach/i-used-react-wrong-for-years-upgrade-your-code-with-react-hooks-ef676aaacf19">Visit Now</a></p>