All Posts In React

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.

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.

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.

Using "router" as a Dependency is useEffect is dangerous because it could cause an infinite page re-rendering. The better to fix this is using "Router" directly imported from "next/router"

In today's blog post, we'll explore the creation of a versatile horizontal scrolling component that enhances user experience when dealing with horizontally overflowing content. This component is especially useful when you have a row of content elements that don't fit within the screen's width, and you want to provide intuitive navigation options.

In web development, providing a seamless and user-friendly experience is crucial. One common scenario involves loading a list of blog posts and allowing users to fetch more posts with a "Load More" button. However, when users click on a blog post and then navigate back, the page often resets, and users lose their loaded content. In this blog post, we'll explore how to overcome this challenge by leveraging the power of sessionStorage in a Next.js application.

In Next.js, hydration errors are a common issue when using browser-specific APIs, such as sessionStorage or localStorage. This error occurs because Next.js renders content on both the server and the client. When the server renders the content, it doesn’t have access to the browser-specific APIs, so it may use default values. However, once the content is hydrated on the client side, these browser APIs become available, and the content may change, leading to a mismatch between the server-rendered and client-rendered HTML.