Context API React + Typescript - useContext & useReducer Examples

This tutorial demonstrates how to use React Context API with TypeScript, including useContext, useReducer, providers, useCallback, and custom hooks to organize application state and logic by feature.

Syllabus

Intro
Welcome
Starter Code
Extracting initial state & types
useCounterContext hook & type
Create Context with initial context state
Context Provider
useCallback
Applying the Provider
Custom hooks to deliver context
Spreading the ...initState into the Provider parameters is not really necessary. It does help document but really just creates extra boilerplate. You can pull it in from the lexical scope of the Provider since both are defined in the same file. This will also eliminate the need to use the initState in the App component. initState will simply be passed to useCounterContext in the Provider value.