React Today and Tomorrow and 90% Cleaner React With Hooks

Have you seen the ReactConf talk on hooks? [1] It's absolutely worth the watch, even if you're somewhat familiar with hooks. They go through the pitfalls of class-based components and how hooks solve them. It more-or-less boils down to: 1. class-based components force your lifecycle logic to live in disparate locations. 2. Class-based hooks are obtuse with hidden gotchas whereas pure functions tell you exactly what they're doing. 3. A whole class of unergenomic solutions disappears when you use hooks. [1] [VIDEO]

You aren’t the only person, I’ve certainly heard it before. But I’m yet to hear a convincing rebuttal to Mixins Considered Harmful [1], the hooks talk [2] or the Motivation section [3] on the announcement. The arguments I’ve heard is that it is “cleaner”, “more understandable” or the OO style is preferred. Some developers feel uncomfortable with hook magic because it introduces a more niche programming concept than OO (e.g stateful functions). I don’t find these arguments compelling. What the React team managed to do was reproduce the same functionality as class components while decreasing the footguns associated with them. 1. [LINK] 2. [VIDEO] 3. [LINK]

Just watch the video from ReactConf 2018 where hooks are introduced (by the dude who built them). You can play along at home quite easily by getting started either with "npx create-react-app myApp" or a simple html file with one script tag to download react from a CDN and one script tag for your code. Talk: [VIDEO] By the end of the talk you'll probably be leaning towards "this sounds cool, I'd like to play around with it" or "that sounds like cursed incantations for the damned".

Hooks require less boilerplate to set up and reuse stateful logic across components If you havent watched it yet, the talk that introduced hooks explains much better than I can: [VIDEO]

While you wouldn't want to leave "console.log" in your code in production, you can use them in function components just like a classes' render methods. A better example (from the video "React Today and Tomorrow and 90% Cleaner React With Hooks" from October[1]) is something along the lines of updating document.title = `${some} Page` or possibly calling an API. [1]: [VIDEO]