React Hooks Deep Dive: Part 2 - useContext and useReducer | DungGamer Code Blog

React Hooks Deep Dive: Part 2 - useContext and useReducer | DungGamer Code Blog

import { createContext, useContext } from 'react';
 
const ThemeContext = createContext('light');
 
function ThemedButton() {
  const theme = useContext(ThemeContext);
 
  return (
    <button className={`btn-${theme}`}>
      Current theme: {theme}
    </button>
  );
}

useReducer Hook

useReducer is like useState but for complex state logic:

TypeScript

import { useReducer } from 'react';
 
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count:

Benefits

Predictable state updates
Easier to test
Better for complex state logic