🚀 Mastering React Hooks - useState, useEffect, useContext, useReducer & Custom Hooks 🎯

React Hooks are game-changers! 🎮 They allow you to manage state and side effects in functional components without needing class components. In this guide, we'll dive deep into some of the most essential hooks: useState, useEffect, useContext, useReducer and how to create your own custom hooks! 🔥

🟢 useState – Managing State Like a Pro 😎

The useState hook helps you add state to functional components. It returns a state variable and a function to update it.

Example:

import { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return (
    <div>
    <p>Count: {count}</p>
    <button onClick={() => setCount(count + 1)}>+</button>
</div>);

}

👉 Key takeaway: Always update state using the setter function, never modify the state directly!

🔵 useEffect – Handling Side Effects 💡

The useEffect hook is used for side effects like data fetching, subscriptions, and manually manipulating the DOM.

Example:

import { useState, useEffect } from 'react';

function Timer(){
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const intervalId = setInterval(() => setSeconds(s => s+1), 1000);
        return () => clearInterval(intervalId); // Cleanup function
    }, []); // Run only once, when component mounts;

    return <p>⏳ Timer: {seconds} seconds</p>;
}

🔍 Pro Tip: Always clean up effects to avoid memory leaks! 🧹

The useContext hook is used to share state between components without passing props down (prop drooling) manually.

Example:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemedComponent() {
    const theme = useContext(ThemeContext);
    return <p style={{ color: theme === 'dark' ? 'white' : 'black'}}>Current Theme: {theme}</p>;
}

✨ Best Practice: Combine useContext with useReducer for advanced state management! 💪

🔵 useReducer – Managing Complex State 🤯

The useReducer hook is an alternative to useState for managing complex state logic.

Example:

import { useReducer } from 'react';

const initialState = {count : 0};

function reducer(state, action){
    switch (action.type) {
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({type: 'increment'})}>+</button>
            <button onClick={() => dispatch({type: 'decrement'})}>-</button>
        </div>
        );
}

💡 Why use useReducer?

✅ Great for managing complex state logic 🔄
✅ Works well with useContext for global state management 🌍
✅ Keeps state updates predictable and structured 🎯 \

🟠 Custom Hooks – Reusability at Its Best 🔥

Custom hooks allow you to extract reusable logic from components.

Example:

import { useState, useEffect } from 'react';

function useFetch(url){
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch(url)
        .then(response => response.json())
        .then(data => {
            setData(data);
            setLoading(false);
            })
            .catch(error => console.error('Error:', error));
            }, [url]); // re-run effect if url changes

    return [data, loading];
    }

💡 Why use Custom Hooks?

✅ Clean, reusable code ✨
✅ Extract logic from components 🏗️
✅ Improve readability and maintainability 📖 \

🎯 Wrapping Up

React Hooks make functional components more powerful and flexible! 🔥 Whether you're managing state with useState, handling side effects with useEffect, using useContext for global state, useReducer for complex state logic, or creating custom hooks for reusability, mastering these hooks will level up your React skills. 🚀 Happy Coding! 💻✨

🟢 useState – Managing State Like a Pro 😎

Example:

🔵 useEffect – Handling Side Effects 💡

Example:

🔴 useContext – Sharing State Across Components 🔗

Example:

🔵 useReducer – Managing Complex State 🤯

Example:

🟠 Custom Hooks – Reusability at Its Best 🔥

Example: