<story><title>Making SetInterval Declarative with React Hooks</title><url>https://overreacted.io/making-setinterval-declarative-with-react-hooks/</url></story><parent_chain><item><author>mharroun</author><text>Maybe I am crazy or old school but I though the concept of creating component as a class with standard functions to override (and defining a contract with props types) took a unwieldy language like JS and gave a sane and standard approach to it.&lt;p&gt;I now look at more &amp;quot;modern&amp;quot; functional components &amp;#x2F;w hooks and find it VERY hard to understand the data a component takes and how it uses&amp;#x2F;responses to interactions.&lt;p&gt;It feels like react was class based... and now that functional coding is the &amp;quot;in thing&amp;quot; its trying to shoehorn everything into functional components. In the end it really turns me off to functional programming as I see many developers sacrificing readable&amp;#x2F;understandable components to save a few lines of code.</text></item></parent_chain><comment><author>mambodog</author><text>Hooks address a very specific problem with classes: composability.&lt;p&gt;You can use the various builtin hooks to do stuff that (in class-based React) previously required implementing methods (eg. componentDidUpdate). Using those methods works fine until you want to split out and reuse part of those methods in other components.&lt;p&gt;You can certainly try class composition: creating little classes that you call in each of the relevant lifecycle methods. However this adds a lot of boilerplate to components which use the composed objects (as is common with class composition). It&amp;#x27;s also awkward to share the setState API with these composed classes.&lt;p&gt;The Custom Hooks approach[1] with React Hooks just makes it really easy to use state and lifecycle functionality when extracting common behaviour to can be shared between multiple components.&lt;p&gt;React has tried to address this composition issue several times in the past, and I think hooks are the nicest yet:&lt;p&gt;React&amp;#x27;s old &amp;#x27;Mixins&amp;#x27; feature got a lot of the way there, but still didn&amp;#x27;t compose perfectly. For example, you had to avoid method and state key name collisions between mixins.&lt;p&gt;Creating a &amp;#x27;Higher Order Component&amp;#x27; is another approach, which is less verbose than class composition, but makes your component tree deeper, and can also be annoying to statically type.&lt;p&gt;The community also came up with &amp;#x27;Render Props&amp;#x27; to address much the same issue.&lt;p&gt;And of course, you can always just continue to use classes if you aren&amp;#x27;t experiencing any of these pain points.&lt;p&gt;Hooks just compose quite nicely in cases where none of these other approaches do.&lt;p&gt;[1]: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;reactjs.org&amp;#x2F;docs&amp;#x2F;hooks-custom.html&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;reactjs.org&amp;#x2F;docs&amp;#x2F;hooks-custom.html&lt;/a&gt;</text></comment>
<story><title>Making SetInterval Declarative with React Hooks</title><url>https://overreacted.io/making-setinterval-declarative-with-react-hooks/</url></story><parent_chain><item><author>mharroun</author><text>Maybe I am crazy or old school but I though the concept of creating component as a class with standard functions to override (and defining a contract with props types) took a unwieldy language like JS and gave a sane and standard approach to it.&lt;p&gt;I now look at more &amp;quot;modern&amp;quot; functional components &amp;#x2F;w hooks and find it VERY hard to understand the data a component takes and how it uses&amp;#x2F;responses to interactions.&lt;p&gt;It feels like react was class based... and now that functional coding is the &amp;quot;in thing&amp;quot; its trying to shoehorn everything into functional components. In the end it really turns me off to functional programming as I see many developers sacrificing readable&amp;#x2F;understandable components to save a few lines of code.</text></item></parent_chain><comment><author>Waterluvian</author><text>Same. React passed the, &amp;quot;this is obvious and it&amp;#x27;s clear where it fits into the real world&amp;quot; test for me years ago with class based components.&lt;p&gt;But these new features aren&amp;#x27;t passing that test at all. I struggle to grok what hooks do that I was missing before.&lt;p&gt;It gets me wondering if the React team is in a position to know when React is good enough and needs to be left alone for the most part.&lt;p&gt;The good news is that I seem to be able to just ignore hooks and remain very productive. I even started ignoring advice on when to use an SFC instead of a class and found myself happier and more productive with better code.</text></comment>