Hooks were introduced to React in February 2019 to improve code readability. This time We are examining how hooks work with TypeScript.

Prior to hooks, React components used to have two flavors:

  • Classes that handle a state
  • Functions that are fully defined by their props

A natural use of these was to build complex container components with classes and simple presentational components with pure functions.

What Are React Hooks?

Container components handle state management and requests to the server, which will be then called in this article side effects. The state will be propagated to the container children through the props.

Image for post
Image for post

But as the code grows, functional components tend to be transformed as container components.

Shu Yin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store