← back to all projects
Kanban Board (useContext + useReducer)
Part 6 — State Management
Why This Project
Take the exact same Kanban board and refactor it. Don't add features — just change
how state is managed. Replace all the prop drilling with a BoardContext that any
component can consume directly. Replace the scattered setState calls with a
reducer that handles board actions in one place.
What to Build
Same Kanban board. Same features. But now create a BoardContext with a reducer
for all board actions. Any component that needs board data or wants to dispatch
an action pulls it from context directly.
Requirements
- Create a
BoardContext and BoardProvider
- Reducer handles: ADD_CARD, MOVE_CARD, EDIT_CARD, DELETE_CARD, ADD_COLUMN, RENAME_COLUMN, DELETE_COLUMN
- Header uses
useContext(BoardContext) directly for card count — no props
- Card component dispatches MOVE_CARD directly — no callback prop chain
- Create a custom hook:
useBoard() that wraps the context
- Remove ALL prop drilling from the previous version
- Compare: how many props did each component lose? How much simpler is each component?
Skills Practiced
useContext
useReducer
context providers
custom hooks
action dispatching
refactoring
Pain Point to Notice
Context eliminates prop drilling beautifully. But notice: every component that
consumes BoardContext re-renders when ANY part of the board changes — moving a
card in column 3 re-renders the Header and every other column. For a small board
this is fine. For a board with 50+ cards, you'd start seeing performance issues.
Also, if you wanted to add an undo/redo feature, or log every action for debugging,
there's no clean place to hook that in with context alone. That's what Redux
middleware is for.