🪝 Introduction to Hooks
React Hooks are special functions that allow functional components to use React features such as state, lifecycle, context, and more without writing class components. Hooks were introduced in React 16.8 to make components simpler, reusable, and easier to maintain.
Important
🎯 Why Hooks?
Before Hooks, developers used class components whenever they needed state or lifecycle methods. Hooks brought these capabilities to functional components, making React code more concise and easier to understand.
- Write components using plain JavaScript functions.
- Reuse stateful logic through custom Hooks.
- Reduce boilerplate compared to class components.
- Improve readability and maintainability.
⚙️ How Hooks Work
📚 Common Built-in Hooks
| Hook | Purpose | Common Use |
|---|---|---|
| useState | Manage component state | Forms, counters, toggles |
| useEffect | Perform side effects | API calls, timers, subscriptions |
| useContext | Access shared context | Theme, authentication |
| useRef | Store mutable values or access DOM | Focus input, store previous values |
| useMemo | Memoize expensive calculations | Performance optimization |
| useCallback | Memoize functions | Prevent unnecessary re-renders |
💡 Example: Using useState
The useState Hook lets a component remember values between renders.
Counter Component
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<h2>{count}</h2>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</>
);
}Here, count stores the current value, while setCount updates it. Every update causes React to re-render the component with the latest state.
🔄 Example: Using useEffect
The useEffect Hook performs side effects after rendering, such as fetching data or updating the document title.
Document Title Example
import { useEffect } from "react";
function App() {
useEffect(() => {
document.title = "Welcome";
}, []);
return <h1>Hello React</h1>;
}Tip
📖 Rules of Hooks
- Always call Hooks at the top level of a component.
- Never call Hooks inside loops, conditions, or nested functions.
- Only call Hooks from React function components.
- Custom Hooks can call other Hooks.
🛠️ Custom Hooks
A Custom Hook is simply a JavaScript function whose name starts with use. It allows you to extract and reuse stateful logic across multiple components.
Custom Hook Example
import { useState } from "react";
function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return { count, increment };
}📊 Hooks at a Glance
Use useState whenever a component needs to remember changing values such as counters, form inputs, or toggles.
Use useEffect for tasks like fetching data, setting timers, subscribing to events, or synchronizing with external systems.
Use useMemo and useCallback to optimize rendering by avoiding unnecessary recalculations or function recreation.
🚀 Benefits of Hooks
- Cleaner and shorter components.
- Better code reuse through custom Hooks.
- No need for class components in most cases.
- Easier testing and maintenance.
- Improved separation of concerns.
📅 Learning Path
Learn functional components and JSX.
Understand useState and useEffect.
Explore useContext and useRef.
Optimize applications using useMemo and useCallback.
Create reusable custom Hooks for shared logic.
📚 Official Resources
For more detailed information, refer to the official React documentation on React Hooks. It provides comprehensive explanations, examples, and best practices.