Context API React + Typescript - useContext & useReducer Examples

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Dive into a comprehensive tutorial video on implementing the Context API with React and TypeScript. Learn how to effectively use useContext and useReducer hooks, create custom React hooks, and manage global state. Explore practical examples that demonstrate the extraction of initial state and types, creation of context with initial state, implementation of context providers, and application of useCallback for optimization. Gain insights into best practices for structuring your code and avoiding unnecessary boilerplate. Perfect for developers looking to enhance their skills in state management and TypeScript integration with React applications.

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.