Hi, I'm Chak Shun Yu, a software engineer with a current focus on React, former Storybook maintainer, and technical writer. This blog is where I write about everything I encounter and learn during my journey to become a better developer. The main topics I focus on are React, JavaScript, testing, readability, and team productivity.

Should You Use A ClassName Prop?

August 08, 2022

CSS styling plays an integral role in the development of React components. One of the most interesting challenges is designing a component’s API around styling features. The most common way is exposing a className prop, but is that a good idea and are there better options?

5 Important Things To Check When Picking NPM React Libraries

July 04, 2022

NPM packages are essential to our jobs as React developers. However, with over 1.3 million packages on the registry and varying degrees of quality, picking the most suitable one isn’t always straightforward. To help, this article goes over 5 important aspects to NPM React libraries that you should pay attention to before picking them.

Comparing 3 React Accordion Libraries

June 19, 2022

In the world of React development, there are so many third-party libraries Because of that, it’s easy to get lost in deciding which library to use. This article looks into 3 different libraries for implementing an accordion while going over requirements, what to consider, and drawing comparisons.

7 TypeScript Utility Types For React Developers

June 06, 2022

It's hard to imagine React development without TypeScript nowadays. However, being a good React developer doesn’t automatically translate into being a good TypeScript developer. This article goes over 7 different utility types that are helpful to React developers on a daily basis.

How To Type React useCallback Using TypeScript

May 22, 2022

Every React developer will know of the useCallback hook and have tried to integrate it with TypeScript. However, there are various ways to do so. This article covered three different ways, namely by typing only the callback parameter(s), typing the returning value, or the call itself.

5 CSS Concepts React Developers Should Know

April 24, 2022

No matter whether you're new to React or an experienced developer, the world of CSS can be quite daunting to explore. This article covers the 5 CSS concepts that I think every React developer should know based on my experience using React on a daily basis.

How To Create More Intuitive Styling Using CSS border-box Box Model

April 06, 2022

An integral part of CSS styling resolves around the CSS box model, which is the interaction between the content area, paddings, border, and margins. Contrary to the default model, using the border-box box model has my preference for creating more intuitive styling.

Multiline Text Truncation With CSS line-clamp

April 06, 2022

Multiline text truncation is a common user interface design. It allows for saving precious screen estate, making UI more uniform, and prioritization of information for the user. This article explores how to implement it using CSS's line-clamp.

How Does Shallow Comparison Work In React?

March 27, 2022

Shallow comparison is a concept all over React development and documentation. It plays a key role in React’s internals, but it’s not often explained. This article covers how it works by diving into the source code and finishes with some interesting takeaways.

Why Did And Don’t You Need To Import React

March 13, 2022

Since React v17.0, you don’t have to import React anymore in your JSX files. But why was this seemingly unused import when creating React components necessary in the first place? And why isn’t it anymore now?

A Deep Dive Comparison Between useMemo And useCallback

March 07, 2022

For memoization in React, we have 2 extremely similar hooks useCallback and useMemo. But is there a difference or are they only wrappers around the same logic with different names for the sake of convenience?

A Fundamental Guide To React Suspense

February 27, 2022

After several years, Suspense will finally be officially released with React 18. But what is it, why do we need it, what issues does it address, and what are the benefits?

An Introductory Guide To Concurrent Rendering

February 12, 2022

React 18 will introduce a new and exciting mechanism called concurrent rendering. It opens up a world of opportunities for React developers to control user experiences, but what is it exactly and why do we need it?

Exploring React 18’s three new APIs

February 05, 2022

With the release of React 18 on the horizon, familiarize yourself with three new APIs that should help make concurrent rendering a reality.

5 Reasons React Is Still Worth It To Pick Up In 2022

February 01, 2022

It can very difficult to decide whether a certain frontend framework or library is worth it to pick up. There are so many choices and the field changes on a frequent basis. But even in 2022, there are still plentiful reasons to hop onto the React train if you haven’t already.

What You Should Definitely Look Out For In React In 2022

January 25, 2022

While the year has just started, 2022 is looking extremely exciting for the world of React development. This article goes over the topics that I think will make an enormous impact on the field of React development and that you should definitely look out for in 2022.

A Beginners Guide To Behaviour Testing In React

December 02, 2021

Although behaviour testing is extremely relevant in the field of React, not every developer will have equal familiarity and mastery of it. This article discusses a set of fundamental questions related to behaviour testing in React based on experience in multiple React engineering teams.

How To Prevent Unnecessary React State Update Re-renders

November 14, 2021

State management is one of the most important aspects of React development. However, not every state update should result in a re-render. This article covers how to prevent unnecessary state update re-renders by avoiding the state update or triggering the state update with the existing state.

How To Mock A React Component In Jest

November 07, 2021

Mocking React components is a crucial skill for creating proper React tests. This article will show you how to mock your React components in different scenarios using Jest, namely default exported components, named exported, components that come from ES6 modules and including the props with them.

This Is My 10 Questions React Code Reviewing Routine

October 24, 2021

As a React developer, reviewing is part of our daily responsibilities. However, knowing what to focus on during React reviews isn't a trivial task. This article shares all the questions that I ask myself when reviewing React code and will help you navigate your way through React reviews.

4 Common Patterns You Can Easily Focus On In Your React Code Reviews

October 18, 2021

Besides development, React design patterns can also be used to increase the quality of code reviews. However, doing so isn't trivial and requires a different understanding. This article covers how to easily integrate several common React patterns into your React reviews.

My Simple Checklist For Well Tested React Components

September 26, 2021

Testing components is important in React development but is also often overlooked and neglected. After several years of not knowing what to test or how to approach it, I came up with a testing checklist. This article shares that checklist, discusses the topics, and will help you reach better tested React components.

How To Have More Efficient Meetings As An Engineering Team

September 18, 2021

Everyone hates meetings, especially bad ones. But in the current pandemic situations, remote meetings are part of our work more than ever. This article shares 5 actionable tips that helped us increase the efficiency of our meetings as an engineering team.

React Readability Analysis Of Implementing Custom Hooks

September 13, 2021

Custom hooks are essential to implementing logic flows and making any React app interactive. This article will cover 3 approaches to implementing customs hooks in React and analyze their level of readability.

5 Actionable Tips To Deliver Higher Quality Code Reviews Today

September 02, 2021

Reviewing is a core process in software development, but not all code reviews are created equally. This article shares 5 actionable tips that helped me deliver higher quality code reviews and will help you take your code reviews to the next level.

What Are Proper Use Cases For Snapshot Testing React Components?

August 28, 2021

Snapshot testing your React components is convenient, easy, and low effort, but they are also unreliable, unrealistic, and volatile. Over the years, they have fallen out of favour in the field of React testing. This article looks into the remaining proper use cases for snapshot testing React components.

How Readable Are Your React Component's TypeScript Props Typing?

August 15, 2021

One of the most common usages of TypeScript in a React codebase is typing a component's props. But have you ever thought about how readable your component's props typing is? Let's find out by analysing three different implementation approaches.

React Readability Analysis Of Inline Conditional Rendering

August 01, 2021

Showing UI elements conditionally to users is essential to make any React app interactive and more than a static website. Based on different inputs and interactions, your React app will render different elements. This article will cover the 2 most common approaches to implement inline conditional rendering in React and analyze their level of readability.

How To Write Readable React Content States

July 20, 2021

Content streams are an important part of any React project, but also introduces a lot of complexity. Long term, making sure that the code is readable has a serious impact on the maintainability. This article will cover and analyze the readability of two fundamental approaches to handling content states in your React components.

How To Mock Only One Function From A Module In Jest

April 18, 2021

In this article, I go over the different available mocking approaches, the differences between them, and the different use cases for mocking one particular function from an imported module in Jest.

Think About Your Reviewers

May 22, 2020

A story, self reflection, and learning from an early stage in my engineering job about how I totally forgot about the most important audience of all: reviewers.

Your Code Doesn't Have to Be Perfect

January 20, 2020

A story from an early stage in my engineering job about how I tried too much to come up with the perfect solution, rather than keeping it simple and not unnecessarily wasting time, and a reflection of what I could've done different.

Why I'll definitely use mapDispatchToProps in Redux

January 05, 2020

Why using the second argument of Redux's `connect` function will lead to more maintainable and higher quality React code, as well as significantly improving how you're able to test your components.

My first week of open source: how I got involved, and what I’ve learned

June 13, 2018

When I started to write this post, I had finished my first serious week of contributing to open source. I mainly contributed to the project Storybook. This post will describe the contributions and interactions that took place this week. It will also focus on the path that led up to this week.