React Hooks, Why, What and pros vs. cons

Let's start by why? Why we might need to use React Hooks?

The primary challenge in developing React applications involves making large component logic reusable and shareable across components to prevent duplication. Developers traditionally relied on design patterns like Higher Order Components (HOC), render props, prop drilling, or mixins. However, these approaches introduce complexity and difficult-to-maintain code structures.

React hooks enable developers to use functional components exclusively, eliminating the need for these complex patterns. Functional components offer easier reading, testing, and less boilerplate code. Before hooks, functional components lacked local state and lifecycle methods, but now they provide feature parity with class components while avoiding the complexities of the this keyword.

As noted by Sophie Alpert at React Conf 2018, the core issues were:

• Reusing stateful logic between components proved difficult
• Complex components became hard to understand
• Classes confused both people and machines

React hooks address three interconnected problems:

• Wrapper hell (caused by HOC, render props, and prop drilling)
• Huge components (difficult to test, maintain, and co-locate)
• Confusing classes (the this keyword and reusability challenges)

The React documentation states: "In the longer term, we expect Hooks to be the primary way people write React components."

So what is React Hooks? What are these about?

React Hooks are special functions that add state, effect features, performance optimization, and more to functional components. There are 10 built-in functions, each beginning with "use" and offering unique functionality. They're completely optional — existing class components don't require rewriting, but new components can adopt them incrementally.

Rules for using hooks

React relies on the order in which hooks are called. The call order must remain consistent across renders. The React team recommends installing an ESLint plugin to enforce these rules automatically.

Two essential rules:

1. Only call hooks at the top level — not within conditionals, loops, or nested functions
2. Only call hooks from React functions — functional components and custom hooks

Common hooks

• useState: enables functional components to have local state through a simple API
• useReducer: organizes state management similar to Redux patterns
• useEffect: handles side effects, replacing lifecycle methods with a different mental model
• useContext: passes data down the component tree without prop drilling
• useCallback: provides performance gains by memoizing callbacks
• useMemo: caches data to reduce computation time

See the rest of the hooks in the React docs.

Pros vs cons

Advantages:

• A superior alternative to common design patterns
• Easier to test and maintain with functional components
• Creates reusable, isolated components reducing redundant logic
• Simple to use and co-locate code

Disadvantages:

• Requires respecting specific rules; without a linter, rule violations are hard to catch
• Requires considerable practice for proper usage (especially useEffect)
• Risk of misuse — useCallback and useMemo require understanding when they're actually beneficial

Weighing pros against cons, the advantages outweigh disadvantages because hooks solve significant problems while their drawbacks are manageable through proper practices.

Conclusion

React Hooks address common challenges faced by React developers by encouraging functional components, improving code simplicity, maintainability, and testability. While hooks have their own considerations, respecting React team recommendations prevents unexpected behavior.

As Dan Abramov noted: "The main motivation is being able to extract and reuse logic between components without introducing extra nesting into the tree." He also emphasized that "with hooks we separate code not based on the lifecycle method name but based on what the code is doing."