Explain React Hooks.

React Hooks are functions introduced in React v16.8 that let you use React features—such as state, lifecycle, context, refs, and more—inside functional components, without writing class components.

1. State Management 🧠

   • useState lets you add local state to functional components.
   • Example: const [count, setCount] = useState(0) replaces this.state and this.setState.

2. Side-Effect Handling 🌐

   • useEffect unifies lifecycle behaviors: data fetching, subscriptions, DOM updates, and cleanup.
   • It replaces componentDidMount, componentDidUpdate, and componentWillUnmount.

3. Context Access 🌍

   • useContext lets you consume a React Context value directly, without <Context.Consumer> wrappers.

4. Refs in Functions ✨

   • useRef creates mutable container objects (with a .current property) to hold DOM refs or any mutable value across renders.

5. Reducer Pattern 🔄

   • useReducer provides a Redux-like reducer pattern for complex state logic:

     JS

6. Custom Hooks 🔧

   • You can create your own hooks (functions starting with use) to reuse stateful logic across components.
   • Ensures separation of concerns and cleaner code.

7. Rules of Hooks 📏

   • Only call hooks at the top level of your component or custom hook.
   • Only call hooks from React function components or other custom hooks.