Using Flow generics to type generic React components

From multiple typed components to one

In the project I was working on, I had to handle multiple resources (named here Resource1, Resource2, Resource3, … for simplicity). Each resource had its own associatedList component (Resource1List, Resource2List, …), each of which was pretty similar to the others in terms of implementation, as the resources themselves were quite the same outside of a few differences. Below, you can see the types of Resource1 and Resource2 :

1
type Resource1 = {
2
  id: string,
3
  name: string,
4
};
5

6
type Resource2 = {
7
  Id: string,
8
  name: string,
9
};

So given these specs, I wanted to build a single ResourceList component to display items of a given resource. Its props would include an onItemClick callback function, which takes a variable of that resource type as an argument. Here’s the first type that I wrote for the props of the ResourceList component:

1
type Props = {
2
    // other props
3
    onItemClick = (
4
        Resource1 |
5
        Resource2 |
6
        // other resource Flow types fo here
7
    ) => void,
8
}

Now that the component is typed, the next step consists of trying to use it with one of our Resources. Here’s how ResourceList can be used for Resource1 for example:

1
import React from 'react';
2
import ResourceList from 'components/ResourceList';
3
import type { Resource1 } from 'core/types';
4
...
5

6
class Resource1List extends React.Component {
7
  onResource1Click = (item: Resource1) => {
8
    const { name, id } = item;
9
    // some action on Resource1 fields
10
  };
11

12
  ...
13

14
  render() {
15
    return <ResourceList onItemClick={this.onResource1Click(item)} />;
16
  }
17
}

This is the moment when I ran into the main problem. Given the way I typed this component, running Flow against the code in the example above outputs an error:

In the Resource types we declared above ( Resource1, Resource2 , …), you can see that the key of the “id” field of each Resource doesn’t match. Thus, whenever we will use this component and write an onItemClick function for a resource, Flow will give you an error telling us the properties of the other resources are missing.

How to use generics

To overcome this kind of situation, generics can be very practical. This is how we can end up typing this component and fix this issue:

• we can provide a generic BaseProps type which takes a generic type T
• use T inside BaseProps for ouronItemClick function which will take an item of type T as argument and thus be of type T => void
• declare Resource1Props , Resource2Props , etc, based on BaseProps
• write the type Props as an enum of Resource1Props, Resource2Props, etc.

The resulting code looks like this:

1
type BaseProps<T> = {
2
    // other props
3
    onItemSelect = T => void,
4
};
5

6
type Resource1Props = BaseProps<Resource1>;
7
type Resource2Props = BaseProps<Resource2>;
8

9
type Props = Resource1Props | Resource2Props;

Running Flow with this type should output the following:

We have now typed our generic list component properly thanks to Flow. We can see that using generics not only brings flexibility to our type, but also will help in the future when we want to scale up the usage of this component, so it can be used with even more resources.