Several practical ways to improve site performance with React.

For months, we have worked on web performance for our site. It is a tough journey, because even if you know all the good principles (less bundle size, less useless import, lazyload whenever you can), it could be still quite difficult to find good solutions. In this article, I am going to share what I have learnt during these months with some examples.

Why site performance is even more important today

As users, we don’t like slow website, and so does Google: from May 2021, Google Search take page experience into account, in another words, site performance is linked…


Intro

In the beginning of development with React, Redux has been a great tool for managing data with certain drawbacks. The drawbacks include:

- Sometimes we have too many layers of components if they are connected. The ‘connect’ is actually a Higher Order Component.

- Sometimes we need to pass data through multiple levels to reach the component needed

React has introduced context and its own hook useContext to prevent from passing data through layers. With the hook useReducer, we can easily create a dispatch function by yourself. …


React.memo, PureComponent, React.useMemo, React.useCallback are React APIs for optimizing web performance. However, on the React official document website, there are only explanations without example, which makes it hard to understand the real use cases. In this article, I want to list my misunderstandings and pitfalls I had when I worked with these APIs.

Let’s GO!

1. If parent component rerender, will all the child components rerender, even if the props for the child component remain the same ?

The answer is Yes.

For the Root component, if the state or props don’t change, the Root component will not rerender.

However, for the child components, even if they don’t have any prop, or the props don’t change at all, the child components will always…


In this article, I will talk about writing test for react component, connected component, higher order component(HOC), native react hooks, redux saga function (generator function), and function with promise. In the end, I will also talk about an important technique in react testing: how to mock dependencies.

All the examples are available in this git repo: react test demos

Let’s GO!

1. Test with a component

We will begin with tests for react component with Enzyme. If you have already worked with Enzyme, you should know that they are shallow and mount for rendering the component. …


A design system should serve two things: export shared components, and show what shared components we have.

In this article, I will cover some technical details on the popular implementation of a design system with React + TypeScript + Storybook.

Here is the source code and an example project to import and use it.

Let’s GO !

1. Webpack Configuration for JS library

First of all, how do we create a system for sharing components? There are two choices:

The first choice is to export jsx files directly, without compiling.

The second choice is to compile the es6 jsx code components into es5 and export the…

Albert Yuebai XU

Fun of ReactJS, Javascript, Data visualization www.yuebaixu.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