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.
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.
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.
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.
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.
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.
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.
Semantic UI's table component is not quite mobile-friendly even with the stackable option. Actually, there is no standard way to make a stable responsive. A horizontal scrollable table is often being used, but if you like a stackable way, and with a table header as a label on each row, then in this article, I will show you how to do it using existing Semantic UI's table component with some small changes.
For a constantly changing information site, it's better to display the last updated date on the website so that the visitors can have a better sense of the age of the data. Here are two ways to do it with NextJS.