Hasty Treat - Why should I use React Hooks?

Episode Summary

Executive Summary: Scott and Wes argue that React hooks make code more reusable, explicit, and maintainable than class components by decoupling logic from UI, reducing duplication, improving state handling, and enabling new patterns in context, custom hooks, and state libraries. They also note real drawbacks—mainly naming confusion and async/effect ergonomics—but conclude hooks are the clear default for modern React.

Main Topics: Why hooks replaced class-component patterns: Hooks let developers move logic out of components and reuse it across features, replacing many lifecycle and inheritance-style patterns with composable functions. Decoupling UI from behavior: The hosts emphasize that hooks separate state, side effects, and business logic from presentation, making code easier to move, share, and reason about. State management improvements: Hooks made React state handling more flexible through useState, context wrappers, and external state libraries like Zustand, Jotai, and Recoil-style patterns. Reduced duplication and simpler updates: useEffect and smaller focused hooks eliminate repeated mount/update logic and reduce the need for custom setter wrappers or duplicated lifecycle code. Refactors, conventions, and codebase scale: They discuss converting codebases incrementally, preferring named functions and named exports, and how larger projects benefit from explicit patterns. Hooks shortcomings and naming issues: The hosts critique confusing API names like useEffect/useLayoutEffect, awkward cleanup conventions, and the difficulty of async logic and timers in hooks. Comparisons with Vue’s Composition API: Vue’s WatchEffect and onCleanup are cited as examples of clearer naming and more ergonomic async support than React’s hook APIs.

Key Arguments: Hooks improve quality of life by making logic composable and reusable across components instead of tying it to class lifecycles. They decouple side effects and state from the UI, which makes components easier to understand and refactor. Hooks reduce code duplication by collapsing mount/update logic into targeted effects that rerun only when dependencies change. Custom hooks and code generation unlock powerful abstractions, such as typed GraphQL hooks and reusable logic packages. Context becomes much more ergonomic when wrapped in custom hooks, allowing direct access to values like the current user. Modern state libraries such as Zustand and Jotai fit naturally with hooks and offer simpler alternatives to Redux-like patterns. Migrating code incrementally to hooks can improve understanding and reduce component complexity, even if not every class should be converted immediately. Classes still have value for general object-oriented code, but React class components are largely seen as obsolete in new development. Hooks are not perfect: their names are not very descriptive, async effects are awkward, and timer APIs remain cumbersome. Explicit patterns—named functions, named exports, and clear typing—scale better as codebases grow and become more complex.

Data Points: Codebase conversion: Almost entire tutorials codebase converted to hooks; only one class component remains - Scott describes refactoring most of his site away from class components, leaving one large third-party YouTube player component unchanged Code reduction: About half - Scott says refactoring a large stateful component to hooks reduced its code size to about half Effects timing pattern: Rerun when dependencies change - Describes useEffect as replacing lifecycle duplication with dependency-based reruns Refactor scope: Hundreds of components - Scott references converting an entire codebase containing hundreds of components

Pivotal Quotes: "the biggest thing for me about React hooks is that they decouple the UI from the logic" — Wes: Core argument for why hooks are superior to class-based React patterns "I don't want to touch it. And YouTube isn't a big part of our platform anymore." — Scott: Explaining why one class component was left unconverted during a broader hooks migration "classes aren't going anywhere. I just much prefer to write everything in a function." — Wes: Summarizing the hosts’ view that React components should generally be function-based even if classes still exist

Implications: For React teams, hooks are now the default for new work and gradual migrations, especially as codebases grow. Expect more reusable abstractions, more explicit code, and ongoing pressure to improve effect/timer ergonomics and naming.