Learn React with TypeScript - Second Edition

11

Reusable Components

In this chapter, we will build a checklist component and use various patterns to make it highly reusable but still strongly typed.

We will start by using TypeScript generics to strongly type the data passed to the component. Then, we will use the props spreading pattern to make the component API-flexible, and allow consumers of the component to custom render parts of the component using the render props pattern. After that, we will learn how to make custom hooks and use this to extract logic for checked items and how to make the state within a component controllable to change the component’s behavior.

We’ll cover the following topics:

• Creating the project
• Using generic props
• Using props spreading
• Using render props