Context API React + Typescript - useContext & useReducer Examples

Overview

Limited-Time Offer: Up to 75% Off Coursera Plus!

7000+ certificate courses from Google, Microsoft, IBM, and many more.

Learn how to utilize the Context API with React and Typescript through examples using useContext, useReducer, and custom React hooks. This course aims to teach you the fundamentals of global state management by covering topics such as creating context, providers, and custom hooks. The teaching method includes practical examples and code demonstrations. This course is designed for individuals interested in enhancing their skills in React development, specifically focusing on state management using the Context API with Typescript.

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.