📦 Built-in Hooks — useContext, useReducer, More

React provides many built-in Hooks beyond useState and useEffect. Each solves specific problems.

🎯 useContext Hook

useContext lets you access context values without prop drilling. Consume context from providers up the tree.

import { createContext, useContext } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useContext('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function Button() {
  const { theme } = useContext(ThemeContext);
  return (
    <button style={{ background: theme === 'dark' ? '#000' : '#fff' }}>
      Click
    </button>
  );
}

💡 useReducer Hook

useReducer manages complex state with multiple actions. Similar to Redux but simpler.

import { useReducer } from 'react';

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, { count: 0 });

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

📊 Built-in Hooks

🔑 Key Takeaways

• ✅ useContext accesses context without props

• ✅ useReducer handles complex state

• ✅ Each Hook solves specific problems

• ✅ Combine Hooks for powerful logic

• ✅ Built-in Hooks cover most needs

Ready to practice? Challenges