All Posts In React

Clarify React Refs by Examples
Adam C. |
You may find out React Refs is confusing like I did. In this article, we use real examples to explain what Ref is, how to use it to do focus, and how to do forwarding Ref, etc. We will cover the Ref usages in both Class component and Functional Component.
Why the React Component Renders Twice
Adam C. |
There are two possible reasons that your React component renders twice. One is that your component is not a pure component and its parent re-renders after it's initial rendering. The other is that you are using React.StrictMode, which could cause double rendering in the development mode.
A Quick Walk-Through of useEffect
Adam C. |
useEffect is complicated compared to useState. Maybe because it handles three states together: componentDidMount, componentDidUpdate, componentWillUnmount. In this article, we will look into all threes together to understand how useEffect hook works.
Migrating to Apollo Client 3.0
Adam C. |
Apollo Client 3.0 includes some breaking changes, but since the Apollo Boost project is now retired, and React-Apollo has been deprecated, it's time to migrate. But Apollo Client 3.0 is mainly focusing on Hooks when being used in the React project. If your React project is not Hook ready yet, you may be wondering it's possible to use Apollo Client 3 with React Class Components or not. In short, the answer is YES.
NPM Update is Painful
Adam C. |
Updating NPM seems to be very easy. Running 'ncu -u' followed by 'npm install', we can have all our dependencies up to date. However, updating packages without checking breaking changes is very dangerous. I could not find any easy solution, but suggest doing this often and testing your app thoroughly.
Code Splitting Make a Huge Different
Adam C. |
React is usually used to build a single page application, which means you only load the application code (HTML, CSS, Javascript) once. It works perfectly for a small application, but for a complex application, to load all Javascript code into a bundle (i.e., main.js) could cause the initial page loading to become very slow. So when you find that your app has a performance issue, the first thing you should try is code-splitting.
How to Use Global Variable among ES6 Modules
Adam C. |
ES6 Modules give us a lot of freedom, so then we can write functions in a different module. An ES6 module is a file containing JS code, and we can import and export it in modules. In this article, l will show you how to share the variables among ES6 Modules, which I think it's an alternate way to do closure in ES6 Modules.
How to Get IANA Timezone Name from Local Datetime
Adam C. |
Surprisingly there is not a function to get a top-level US timezone. We can get a valid timezone from Intl object, but it is not a top-level, i.e., US/New-York vs US/Easten. Get a top group of US timezone is usually, for it will simplify the timezone selection dropdown. In this article, I will show how to create custom functions using raw IANA data to achieve this goal.