Customized hooks are like helper functions in React, they encapsulate logics with different React native hooks: useState, useEffect, useCallback, useMemo, useContext, useRef. In this article, I am going to share some common patterns for customized hooks with the help of React native hooks. Customized hooks should begin with with, to…

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…

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…

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 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…