What Are React Hooks? Pros and Cons

By Rahul — Google Frontend Engineer

What Are Hooks?

Hooks let you use state, lifecycle, and other React features in function components. Introduced in React 16.8, they replaced the need for class components in most cases.

Core Hooks

Pros

• Simpler code: No more this binding, constructor, or render method
• Logic reuse: Custom hooks let you extract and share stateful logic without HOCs or render props
• Colocation: Related logic stays together instead of being split across lifecycle methods
• Composable: Hooks compose naturally — call one hook inside another
• Smaller bundle: Function components are smaller than classes after minification

Cons

• Stale closures: The most common bug. Callbacks capture old values
• Dependency arrays: Getting them wrong causes bugs (missing deps) or performance issues (too many deps)
• useEffect complexity: Mixing multiple concerns in one useEffect is tempting but bad
• Rules of Hooks: Cannot call hooks conditionally or in loops — sometimes feels limiting

The Stale Closure Problem

Custom Hooks

Summary

Hooks simplify React development by enabling state and effects in function components. They enable powerful code reuse through custom hooks. Watch out for stale closures and dependency array mistakes. Use functional updates and the exhaustive-deps ESLint rule.