Enhancing React Prop Flexibility: The Discriminated Unions Approach
Introduction:
Type casting the props of the react component is very crucial for ensuring type safety and preventing potential bugs. One approach to enhance the flexibility of props in React is by using discriminated unions.
Discriminated unions refer to a pattern where a type can have multiple shapes, and a common property, known as the discriminant, is used to determine which shape the type represents. This allows for more precise and type-safe handling of different variants of data.
Let us integrate the concept of Discriminated Unions into our React component to gain a comprehensive understanding of its application.
Implementation
Here we have an elementary component called MediaPlayer. Nothing complex going on here, the component returns an audio element or video element based on the type pass-on as props. One thing you might have noticed here is that there are two extra attributes that we are passing in the video element, unlike the audio element just for the sake of this example.
Here is the type for our props:
Next lets use our newly created component:
With this, our app seems to work just fine, and I read somewhere on the internet that, the number one rule of coding is, If your code works then don’t touch it. So let's just leave it like this.
NO! I am just kidding let's break this number one rule :
Wouldn’t it be convenient if we could just allow these two extra props i.e. autoplay and loop only if prop type is video since we only need them there right? Like that, developers would have better control and clarity when working with props. We can achieve exactly that using discriminated unions.
Okay! That's enough talking let's implement it in our props-type interface.
We can also refactor the above code as follows, it looks cleaner:
Let’s understand what is happening in the code first.
In essence, regardless of the, the presence of the source prop is mandatory. We permit only either AudioMedia or VideoMedia as props for the MediaPlayer component. The type serves as a discriminant, with its value restricted to audio or video. Only when its value is specified as additional props become available. Similarly, you can include other props inside the AudioMedia interface that are exclusively intended for audio.
Now, if we attempt to pass in additional props while the type is set to ‘audio,’ TypeScript will raise the following error.
With the type being ‘video,’ we benefit from auto-completion in development tools/IDE. This simple yet powerful approach not only enhances the flexibility of props in React but also aids in preventing potential bugs.
This is how it looks when we use the component correctly:
Conclusion:
In wrapping up, Discriminated Unions in TypeScript provide a powerful means to refine and control React component props. By introducing discriminative properties like type, we ensure that only relevant props are available, promoting code clarity and reducing the likelihood of bugs.
The elegance of Discriminated Unions lies in their simplicity and effectiveness. As you delve into React development, consider integrating this approach to foster a more resilient and maintainable codebase.
Happy coding!
