🌐 Context API

🤔 What is Context API?

Context API is a built-in feature in React that allows state to be shared across components without having to pass props manually at every level. It provides a way to manage global state efficiently and improves performance by reducing unnecessary prop drilling.

📌 When to Use Context API?

• 🔄 When multiple components need access to the same state (e.g., authentication, theme, user preferences).

• 🚫 When prop drilling becomes complex and difficult to manage.

• ⚡ When using Redux or other state management tools feels like overkill.

• 🏗️ When creating scalable applications requiring better state organization.

🚀 Advantages of Context API

✅ Eliminates prop drilling – No need to pass props through multiple levels.
✅ Better state management – Keeps state centralized.
✅ Performance improvement – Reduces unnecessary re-renders compared to prop drilling.
✅ Easy to integrate – Built into React, no need for third-party libraries.

🛠️ How to Use Context API?

🏗️ Method 1: Using useContext

🏗️ Step 1: Create Context

import { createContext } from 'react';

const TodoContext = createContext();
export default TodoContext;

🏗️ Step 2: Create a Context Provider

import React, { useState } from 'react';
import TodoContext from './TodoContext';

const TodoProvider = ({ children }) => {
  const [todos, setTodos] = useState([]);

  return (
    <TodoContext.Provider value={{ todos, setTodos }}>
      {children}
    </TodoContext.Provider>
  );
};

export default TodoProvider;

🏗️ Step 3: Use Context in Components

import React, { useContext } from 'react';
import TodoContext from './TodoContext';

const TodoList = () => {
  const { todos } = useContext(TodoContext);

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
};

export default TodoList;

🏗️ Step 4: Wrap App with Context Provider

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import TodoProvider from './TodoProvider';

ReactDOM.render(
  <TodoProvider>
    <App />
  </TodoProvider>,
  document.getElementById('root')
);

🏗️ Method 2: Using a Custom Hook with Context API

Using a custom hook simplifies accessing context data across components.

🏗️ Step 1: Create a Custom Hook

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

const TodoContext = createContext();

export const TodoProvider = ({ children }) => {
  const [todos, setTodos] = useState([]);

  return (
    <TodoContext.Provider value={{ todos, setTodos }}>
      {children}
    </TodoContext.Provider>
  );
};

export const useTodo = () => useContext(TodoContext);

🏗️ Step 2: Use the Custom Hook in Components

import React from 'react';
import { useTodo } from './TodoContext';

const TodoList = () => {
  const { todos } = useTodo();
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
};

export default TodoList;

---

💾 Local Storage

❓ What is Local Storage?

Local Storage is a web storage API that allows data to be stored persistently in a user's browser with no expiration date. It provides an easy way to store and retrieve data between user sessions.

📌 When to Use Local Storage?

• 🎨 To persist user preferences (e.g., theme, language settings).

• 🔄 To store data that needs to survive a page refresh (e.g., to-do list, shopping cart).

• 🚀 To avoid frequent API calls by caching data locally.

• 🛑 When security is not a primary concern (avoid storing sensitive data like passwords).

🚀 Advantages of Local Storage

✅ Data persists across sessions – Unlike session storage, it remains until explicitly deleted.
✅ Fast read/write – No need to fetch from a database.
✅ Saves API calls – Reduces unnecessary network requests.
✅ Easy to use – Built into the browser.

🛠️ How to Use Local Storage in React?

📝 Step 1: Save Data to Local Storage

localStorage.setItem('key', JSON.stringify(value));

📂 Step 2: Retrieve Data from Local Storage

const data = JSON.parse(localStorage.getItem('key'));

🏗️ Step 3: Use Local Storage in a React Component

import React, { useState, useEffect } from 'react';

const TodoApp = () => {
  const [todos, setTodos] = useState(() => {
    const savedTodos = localStorage.getItem('todos');
    return savedTodos ? JSON.parse(savedTodos) : [];
  });

  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  return (
    <div>
      <button onClick={() => setTodos([...todos, `Task ${todos.length + 1}`])}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

---

✅ Best Practices

• 🔹 Always stringify data before storing it in Local Storage.

• ⚠️ Use try-catch blocks when accessing Local Storage to handle errors gracefully.

• 🔒 Avoid storing sensitive information in Local Storage.

• 📦 Keep Context Providers modular for better reusability.

• 🛠️ Use custom hooks to encapsulate Local Storage logic.

---

🎯 Conclusion

• ✅ Context API helps manage global state without prop drilling.

• ✅ Local Storage ensures data persists across browser sessions.

• ✅ Best practices include using custom hooks and modular code.

• ✅ Combining both makes a powerful state management strategy in React applications.

• ✅ Scalability & Performance Optimization – Improves maintainability in large-scale apps.

This documentation is now as comprehensive as official guides and provides a one-stop solution for Context API & Local Storage in React. 🚀 Let me know if you need any more refinements!