How to use React Hooks useContext and useReducer with TypeScript

Steven Creates
4 min readJan 8, 2021

In this guide + article we are going to be walking through setting up usage of typescript with Reacts useContext hook with typescript.

Photo by Tobias Jelskov on Unsplash

Index:

  • Follow Along
  • Quick Start (scroll to bottom)

Follow Along

We are going to be creating two buttons that toggle a feature on or off to demonstrate the following.

  • How to use TypeScript with useContext
  • How to use TypeScript with useReducer
  • Extra shows types with functions and values

Thank you for reading, feel free to clap and provide any feedback you have.

Intro

Why add TypeScript to React? I believe we are at the tipping point to where TypeScript is going to be accepted like wild fire in the next year or so. So it's important to understand how to use it and why to use it.

Step 1: File Structure (not required if you are using an existing app)

--

--

Steven Creates

Software Engineer with 7+ years of hands-on experience designing, developing, and implementing. Focusing on React + Animations + TypeScript + Storybookjs