An important part of building component libraries with React is making sure they are lightweight and optimized.

For example, I use Lodash a lot in my applications. I only use a handful of the functions Lodash has to offer. When I bundle my application for a production release, I don’t want the full 1.14 Mb library being pulled in.

Tree shaking, or “dead code removal”, is a technique that allows you to remove any unused code from a library.

In order to make tree shaking work, a few things need to be in place.

1. The target library needs to be…

Redirecting users after login is a common feature in web applications. Normally it shows up when a user's session has expired and they need to login in again before seeing the page they originally requested.

This experience is expected by users but needs to be specifically implemented by the developer.

In this article, I’ll be going over how I recently implemented this feature.

I’ll be leveraging the location object in the Browser Window. I will also be using the React routing library Reach Router. …

Test cases can be difficult to write when dealing with forms. I have found this especially difficult with my preferred UI library: Material UI. I love the components, design, and its seamless use with React, but when it comes to testing it can be difficult.

Below I’m going to show an example of an account delete request form I recently built and how I wrote my test cases.

I use jest + react-testing-library in my testing stack.

First, the form

The form itself was simple. A text field, checkbox, and submit button.

When the form loads the text field is empty and the…

I’ve been using anti-corruption layers in my React + Redux apps for a while now. It’s a helpful design pattern when the asynchronous data you’re receiving is difficult to work with or needs some sanitation before you let it into your application state.

What is an Anti-Corruption-Layer?

An Anti-Corruption-Layer is a layer between different subsystems that don’t share the same semantics.

For me, these layers are functions that enhance or transform data just before it enters my global state, or just after it leaves.

I’ll be demonstrating some simple examples of how I have used anti-corruption-layers to make global state management a bit easier…

Before I became a web developer, I was a golf instructor.

My golf career spanned 5 years, took me up and down the east coast of the US and to Beijing China. It was fun for a while, but golf is best left a hobby for me.

After golf instruction, I wanted to become a web developer. Coding was always interesting to me so I gave it a shot. I’ve been a full stack developer for the past 4 years and the more code I write, the more I enjoy it.

After 5 years in the golf industry and 4…

Input fields that wait for a user to finish typing before performing an action are common feature in web applications. They can be tricky to get working so I wanted to show how I incorporated a wait timer into my input fields.

In my case, I needed a field that waits for users to finish typing in a few places. I already had an input component made with some custom styling, so I decided to extend the wait logic as a customizable feature.

For my example, Im using React, Typescript and Material UI.

Below is the complete example, I’ll step…

I wanted to share a design pattern I use to manage what certain users can or cannot see inside the React applications I build.

You might find this useful if your application needs to manage what users can see based on some setting in their account.

The example I’m going to show has several different components working together:

1. React for the UI component library
2. Typescript for type safety
3. Redux for global state management
4. Bitmask for users permissions

To start, let’s say you have a simple component with some text that you want to show or hide based on a users…

In my previous post, I showed a simple react hook that makes a specific api call. This time, I want to show how to turn that specific hook into a better, more reusable version.

Im going to use a very powerful feature of typescript called generics.

To start off, let’s see our first iteration of the api hook again.

This hook works okay, but if we wanted to make a similar api call to another endpoint, we would have to create another hook that would repeat most of what we have.

A more generic version of this hook could…