Why React Hooks?
Introduced in React 16.8, Hooks allow us to compose React applications with only function components. Previously, adding state required converting to a class, but now it's feasible within functional components.
Rules of Hooks
- Only Call Hooks at the Top Level: Avoid calling inside loops, conditions, or nested functions to ensure consistent render order.
- Only Call Hooks from React Functions: Hooks can only be called from functional components or custom hooks.
Core Hooks
useState: Used for setting and retrieving local state. It returns a pair: the current state and a function to update it.
useEffect: Allows performing side effects (DOM updates, API calls) in function components, similar to lifecycle methods in classes.
Conclusion
Hooks simplify code by reducing the "ceremony" of component definition, making your codebase cleaner and more readable without making Class Components obsolete.
