conditional props
conditional props

Using TypeScript and conditional props, you can build an API for your React components that is clear and explicit about its prop requirements. Doing so will help your team and will set you apart as a rock-star developer.

We will start with a simple use case, and we will finish up with a more advanced one that involves generics.

This tutorial assumes you have a basic knowledge of TypeScript and types.

One or the other

Imagine you have a component where you have two conflicting properties. You want the client to provide either one property or the other, but not both.

For our example…


JavaScript is by far the most fast-paced ecosystem in the world of software development. Things are constantly changing, and the tools that were hot yesterday are on their way out today. That’s doubly true for React libraries. While it can get tiresome, you have to keep up with the changes to keep your skills relevant and productivity high.

So let’s cover the alternatives to the most popular React libraries that are in a lot of ways a better choice.

moment VS date-fns

Let’s start with a heavyweight of the JavaScript world. …


In this post, let’s take a look at a popular React pattern — Compound Component. This pattern allows writing complex components in a clean and declarative way. It proved to be so useful that almost all of the popular React UI libraries, such as Material UI, Semantic UI, Chakra UI, and many others, ended up adopting it.

This post will include the older way of building compound components and the newer version that uses hooks and Context API.

I’ll be writing components using the Emotion styling library and TypeScript.

What is the Compound Component pattern?

As mentioned before, the Compound components pattern allows writing a declarative…


Have you ever been reported a regression bug that you suspect was introduced many commits ago?

If you think it’s going to be a long and painful exercise finding the culprit, don’t roll your eyes just yet. You can use thegit bisect command to find the offending commit much faster.

In this tutorial, we will go over the basics of git bisect with a hands-on exercise.

What is git bisect?

In a nutshell, git bisect is a command-line tool for analyzing the commit history and finding bad commits. Git bisect uses the binary search algorithm under the hood. …


In this post, let’s go over some simple tips that will help you write cleaner React components and scale your project better.

Avoid passing props with the spread operator

First, let’s start with an antipattern that you should avoid. Unless there’s a specific and justified reason to do it, you should avoid passing props down the component tree using a spread operator, like so: {...props}.

Passing props this way indeed makes writing components faster. However, it also makes it very hard to pin down the bugs in your code. …


When building an MVP, you should be aware of the end goal behind it. According to Eric Ries, the author of the book “The Lean Startup”: “The goal of the MVP is to begin the learning process.” An MVP should be no more than the first step in validating your idea. Its foremost use is to start the Build-Measure-Learn feedback loop.

So in this post, I’ll go over the time-killers people often face when building an MVP and how you can avoid them and start your learning process much faster. …


In this post, you will learn how to create a customized VSCode extension using React.

Creating a VSCode extension is a fun exercise. The entry barrier for submitting it to the marketplace is surprisingly low, and the process of submission is smooth. Plus it’s a great way to give back to the developer community.

As a side note: recently I created a VSCode extension using React called Sheepy. It’s an interactive guide for learning Functional Programming using Ramda.JS. If you’re like me, struggling to use functional programming consistently in your code, you’ll find it useful.

VSCode allows you to build…


Iterators and generators are (somewhat) new JavaScript features introduced with ES6. When I first encountered iterators and generators, I was excited to add them to my tools arsenal. I even wrote an article about Iterators and generators, which you can check out here.

However, working as a front-end developer on multiple projects in recent years, I’m yet to encounter one where iterators or generators are used actively. The counterpoint to that statement might be redux-saga, where generators are the main building block. …


In this post, I will cover five simple React hooks that you will find handy in any project. These hooks are useful no matter the features of the application. For each hook, I will provide the implementation and the client code sample.

useModalState

Web applications use modals extensively and for various reasons. When working with modals, you quickly realize that managing their state is a tedious and repetitive task. And when you have code that’s repetitive and tedious, you should take time to abstract it. That’s what useModalState does for managing modal states.

Many libraries provide their version of this…


Although some people oppose using UI libraries and prefer building their components from scratch, I think they are still worth using because of the speed advantage. The trick then is to find the right one and Chakra UI is a great option.

Chakra UI is gaining traction in React community. At the time of writing, the library has around 15.2K Github stars and 1.2K forks. If you are a fan of emoticon and styled-system then adopting Chakra is a no brainer — the library is built using those technologies as the foundation.

This list will be in the form of…

Iskander Samatov

Software developer. Forever a student. Checkout my blog: isamatov.com

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