Chak Shun Yu

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.

5 Important Things To Check When Picking NPM React Libraries

July 04, 2022 - 4 minutes

Storybook is one of the greatest development tools in frontend development. However, adopting Storybook isn't a trivial decision to make for a team. This article provides an overview of practical factors to consider based on personal experience, business value, and long-term impact.

Comparing 3 React Accordion Libraries

June 19, 2022 - 6 minutes

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?

7 TypeScript Utility Types For React Developers

June 06, 2022 - 6 minutes

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.

How To Type React useCallback Using TypeScript

May 22, 2022 - 4 minutes

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.

How To Filter Nullable Values From An Array Using TypeScript

May 15, 2022 - 5 minutes

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.

5 CSS Concepts React Developers Should Know

April 24, 2022 - 4 minutes

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.

Multiline Text Truncation With CSS line-clamp

April 06, 2022 - 4 minutes

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 Does Shallow Comparison Work In React?

March 27, 2022 - 5 minutes

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.

Why Did And Don’t You Need To Import React

March 13, 2022 - 3 minutes

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.

A Deep Dive Comparison Between useMemo And useCallback

March 07, 2022 - 6 minutes

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.

A Fundamental Guide To React Suspense

February 27, 2022 - 7 minutes

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?

An Introductory Guide To Concurrent Rendering

February 12, 2022 - 4 minutes

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?

What You Should Definitely Look Out For In React In 2022

January 25, 2022 - 6 minutes

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?

How To Prevent Unnecessary React State Update Re-renders

November 14, 2021 - 5 minutes

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.

My Simple Checklist For Well Tested React Components

September 26, 2021 - 6 minutes

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.

How To Write Readable React Content States

July 20, 2021 - 10 minutes
Readable React

After nearly a full year of writing technical about code readability, I learned a lot about it. But the most important thing that I learned about writing readable code is that it isn't for myself, but for others.

3 Levels of Mocking a React Hook: Control and Effort against Representability

June 29, 2021 - 9 minutes

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.

A Comprehensive Guide To Proper Behaviour Testing in React With Enzyme and Jest

May 31, 2021 - 13 minutes

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.