Essential React Hooks & Practical Use Cases ????

What Are React Hooks?

Functions that let you use React features in functional components without classes.

7 Essential Hooks

1. useState

What it does: keeps track of values that can change in your app

// e.g. 1: Basic state management  
const [count, setCount] = useState(0);  
  
// e.g. 2: Form inputs  
const [name, setName] = useState('');  

When to use:

• Storing form input values
• Toggling UI states (open/closed)
• Tracking simple values (counters, flags)

2. useEffect

What it does: helps us run code when things change (or when a component first loads)

// e.g. 1: Run once on mount (empty dependencies)  
useEffect(() => {  
  // Setup code  
  return () => { /* Cleanup code */ };  
}, []);  
  
// e.g. 2: Run when dependencies change  
useEffect(() => {  
  document.title = `${count} new messages`;  
}, [count]);  

When to use:

• Data fetching
• Subscriptions/event listeners
• DOM manipulation
• Syncing with external systems

3. useContext

What it does: allows multiple components to share the same data without passing it manually

// Access theme from anywhere in component tree  
const theme = useContext(ThemeContext);  

When to use:

• Accessing global state (themes, user data)
• Avoiding prop drilling through many components
• When multiple components need the same data

4. useRef

What it does: helps reference an element without causing unnecessary re-renders

// e.g. 1: DOM element reference  
const inputRef = useRef(null);  
inputRef.current.focus();  
  
// e.g. 2: Value persistence between renders  
const prevCountRef = useRef();  

When to use:

• Accessing DOM elements
• Storing previous values
• Holding values that shouldn't trigger re-renders
• Managing timers/intervals

5. useReducer

What it does: Manages complex state logic

const [state, dispatch] = useReducer(reducer, initialState);  
dispatch({ type: 'increment' });  

When to use:

• Complex state with multiple sub-values
• When next state depends on previous state
• When state transitions have business logic
• When actions cause multiple state updates

6. useMemo

What it does: expensive calculations to avoid recomputing them unnecessarily

const expensiveValue = useMemo(() => {  
  return computeExpensiveValue(data);  
}, [data]);  

When to use:

• Optimizing performance-heavy calculations
• Preventing unnecessary computations

7. useCallback

What it does: Memoizes functions so they don’t get recreated every render

const handleClick = useCallback(() => {  
  console.log('Clicked!');  
}, []);  

When to use:

• Preventing unnecessary re-renders in child components
• Avoiding function recreation on every render

Custom Hooks

Create your own hooks to reuse logic between components:

// Extract reusable logic  
function useWindowSize() {  
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });  
  
  // Event handling + cleanup in one hook  
  useEffect(() => {  
    const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });  
    window.addEventListener('resize', handleResize);  
    return () => window.removeEventListener('resize', handleResize);  
  }, []);  
  
  return size;  
}  

Rules of Hooks

1. Only call at top level (no conditions/loops)
2. Only call from React functions
3. Name custom hooks with "use" prefix

Quick Tips

• Use useState for simple state, useReducer for complex state
• Don't forget cleanup functions in useEffect
• Optimize renders with useMemo and useCallback
• Create custom hooks to share logic, not just for reuse
• Use useImperativeHandle to expose methods from child components to parents.
• Use useLayoutEffect when updates need to happen before the browser paints.
• Use useDebugValue to add labels to custom hooks for easier debugging in React DevTools.

???? Wrapping Up

React Hooks are powerful and fun when you understand how they work! Here's a quick recap:

✅ useState → Keeps track of changing values (Think of useState as a small whiteboard where you can jot down notes «data» that might change over time)
✅ useEffect → Runs side effects (like setting a reminder alarm. When certain things happen, you want to be reminded to do something)
✅ useContext → Shares values across components (Imagine a family chalkboard in your house where everyone can read and write messages)
✅ useRef → References elements without re-rendering (is like placing a bookmark in a book. It helps you keep track of a specific spot or element)
✅ useReducer → Handles complex state logic (like a suggestion box for managing complex state changes)
✅ useMemo → Optimizes calculations (like a chef who prepares ingredients in advance so they don’t have to chop them again for every order)
✅ useCallback → Optimizes functions (like saving a shopping list so you don’t rewrite it every time you go shopping!)