# My React Journey – Day 6: React Context API Simplified

Today I learned how to simplify data flow in React apps using the **Context API**. Until now, I’d been lifting state and passing props deeply — but that started to feel messy. Context helped me **clean it up and keep things scalable**.

---

### 🔍 What I Learned

* How to create a **global context** using `React.createContext`
    
* How to **provide context** to children components using a `Provider`
    
* How to **consume** it with `useContext`
    
* A practical use case: **Building a theme switcher** 🔄
    
* Why Context is better than “prop drilling” for shared state
    

---

### 💻 Code Example – ThemeContext Demo

Here’s what I built — a toggle between Light and Dark themes using Context:

`ThemeContext.js`

```plaintext
// ThemeContext.js
import { createContext } from 'react';
const ThemeContext = createContext();
export default ThemeContext;
```

```plaintext
// ThemeProvider.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () =>
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export default ThemeProvider;
```

```plaintext
// ThemedBox.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedBox() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  const styles = {
    backgroundColor: theme === 'light' ? '#f0f0f0' : '#222',
    color: theme === 'light' ? '#000' : '#fff',
    padding: '2rem',
    margin: '1rem auto',
    width: '300px',
    textAlign: 'center',
  };

  return (
    <div style={styles}>
      <h3>{theme.toUpperCase()} MODE</h3>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default ThemedBox;
```

```plaintext
// App.js
import React from 'react';
import ThemeProvider from './ThemeProvider';
import ThemedBox from './ThemedBox';

function App() {
  return (
    <ThemeProvider>
      <ThemedBox />
    </ThemeProvider>
  );
}

export default App;
```

---

### 🧠 Key Takeaways

* Context makes state available globally without prop chains
    
* `useContext()` is a game changer for cleaner code
    
* Great for things like **themes**, **authentication**, and **language settings**
    
* Easier to maintain as your component tree grows
    

---

### 🧱 Challenges I Faced

* I initially tried to use Context without wrapping the app with `ThemeProvider` 😅
    
* Took a bit to understand when to lift state vs. when to use context
    
* Also wondered when Context becomes *too much* — I’ll look into that next!
    

---

### 🚀 What’s Next (Day 7 Preview)

Next, I want to **refactor** this with `useReducer` inside Context for more complex state. Or maybe I’ll build a **notification system** that shows global alerts using context.

---

### 🔗 Project Link

Coming soon