React's useEffect Hook Gets Called Twice

Side Effect Icon

I find myself to be confused while using React’s useEffect hook often. During recent work, I need to use useEffect hook to observe a state or (some state) changes and perform certain code. However, it always results unexpectedly due to extra invocations of that certain useEffect hook, which then calls the side-effect calls ot APIs multiple times and causes incorrect state. I am fighting against the useEffect hook until the Deepseek suggests me setup the deps to a callback function of useCallback hook. However, I am still confused so I try to summarize the workable practices on useEffect hook in this blog.

The Deepseek tells me that useEffect hook can be invoked twice intentionally in dev mode in strict mode. That can explain why I see excessive calls on useEffect hook. Because React components will mount twice in dev mode in order to help developers to find out potential issues (Jesus…).

On the other hand, the suggestion advises me to set deps array to a useCallback so that unnecessary useEffect calls.

So probably I do in this way

const aCallback = useCallback(() => {
    ......
}, []); // Skip the deps of useCallback so that the callback is just cached one time

useEffect(() => {
    ......
}, [aCallback]);

By doing so, if the useEffect hook is invoked twice in dev mode, which implies okay because this behavior is expected in React. This helps to rule out the issue by starting deps simple.

Honestly, the way of React to observe reactive state is clumsy and error-prone. I don’t like React.

Using yazi as File Manager

Duck Toy Icon

What is yazi

Yazi claims itself as a blazing fast terminal file written in Rust. In Linux, doing everything in terminal always make hackers happier. Compared to Windows, Linux ecosystem has abundant command line tools, which increasingly improve the productivity. Also staying fingers on the terminal and using less mouse can improve the productivity when typing things is the most common tasks for a hacker.

Install yazi

I am using homebrew as my package manager in Linux, so simply just input this command in terminal

brew install yazi

Use yazi

After installed, run this in terminal

yazi

Then yazi takes the control of terminal and displays the TUI.

Run Yazi

Use keyboard to do the regular movement just like other GUI file managers. The good thing is that the default yazi setup configures a 3-sections layout that is like a IDE layout. The first column is the folder tree, the 2nd column is the file view, the leftmost column immediately display the file content when navigating them. Surprisingly, it has the code highlights. Cool!

And this is the first short blog about yazi installation and brief usage. I will explore more features and write new blogs about yazi.

Happy coding.

Install KVM on Linux Mint (Part 1)

What is about?

This blog is about installing and setting up KVM on Linux Mint(a Ubuntu distro), then install a Rocky Linux(a RHEL distro) VM via command line. I am referring to this blog for steps.

What is KVM?

According to the wiki, KVM - Kernel-base Virtual Machine is a free open source virtualization module in the Linux Kernel that allows the kernel to function as a hypervisor. It was merged into the mainline Linux Kernel in 2007. KVM requires a CPU with hardware virtualization extensions such as Intel VT and AMD-V.

Installing KVM

I assume you that have some understanding about Linux, shell commands, installing an Linux OS to continue on reading.

Step 1. Check CPU virtualization support

Open terminal, run the lscpu command to list CPU information. Flag “vmx” is from Intel CPUs and flag “svm” is from AMD CPUs.

lscpu | grep -E 'vmx|svm'

Step 2. Enable virtualization in BIOS/UEFI

In new computer, UEFI replaces BIOS for computer hardware bootstrap. Here my laptop is on UEFI and I can press F2 to enter into UEFI to enable CPU hardware virtualization.

You can do this by rebooting your machine and pressing keys like F2, F10 or Delete to enter into BIOS/UEFI. Different keys depend on different manufacturers.

Step 3. Install KVM packages

The main ones are libvirt a lib for KVM virtualization and virt-manager which is its GUI. In Linux Mint and other Ubuntu distros, we use the built-in apt to install packages.

sudo apt update
sudo apt install -y qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils virt-manager

Step 4.1. Verify KVM installation

After apt exits successfully, your system should have command virsh, run the command to verify KVM installation.

sudo virsh list --all

Expect to return without errors.

Step 4.2 Verify libvirtd daemon starting

The service libvirtd is the daemon should be starting by systemd. Verify whether it is starting

sudo systemctl status libvirtd

If not starting, run this

sudo systemctl enable libvirtd
sudo systemctl start libvirtd

Step 4.3 Verify Linux kernel module

Run this

lsmod | grep kvm

Expect to see something like “kvm_intel” if your machine is with Intel CPU.

Step 5 Add your current user to KVM and libvirt group

Your current user has to be in groups kvm and libvirt so that you are granted to manage virtual machines.

Run this

sudo usermod -aG kvm,libvirt $USER
newgrp libvirt

Command newgrp logs current user in a new group.

Step 6 Configure networking for VM

KVM connects to the network or the internet from your host OS. NAT (aka Network Address Translation) is the default one and suits for most basic setups.

Network address translation (NAT) is a method of mapping an IP address space into another by modifying network address information in the IP header of packets while they are in transit across a traffic routing device.[1] The technique was initially used to bypass the need to assign a new address to every host when a network was moved, or when the upstream Internet service provider was replaced but could not route the network’s address space. It has become a popular and essential tool in conserving global address space in the face of IPv4 address exhaustion. One Internet-routable IP address of a NAT gateway can be used for an entire private network.

To talk about NAT is another deep topic, I may separate into another blog to explain it.

NAT
sudo virsh net-list --all

Expect to see default is active state. Default is NAT.

If not seeing active, run

sudo virsh net-start default
sudo virsh net-autostart default

Step 7 Launching Virtual Machine Manager

The installation includes the GUI for Virtual Machine Manager. Start it from command line

sudo virt-manager
Virt Manager

Horray! Installation accomplished!

Summary

I pause and postpone to create VM for Rocky Linux at this point as I’ve found that the blog is already too wordy. I wrap up this as the Part 1. I will write Part n for the other content.

In summary, this blog walks you through steps to install KVM on Linux Mint. Related software and packages are associated with links to extensive content in the internet. You can opt to read them if you are interested to learn more.

On rule of thumb, for linux commands, if you are using Linux, you can run man <command> that shows you comprehensive document for the command. You can learn the command from man, that is a good and convenient way.

Deep Dive into A Math Question of Primary School

Recently I have seen an interesting math problem from primary student level. In surface, it seems trivial but it revealed stunning and interesting mathematic analytical process. I am going to share my experience on that. First of all, this is the problem.

The Problem

Math Problem

Take a deep breath and pause as long as you want to solve this question. It’s not easy. If you are ready or you manage to give up. Please read along…

The solution coming…

The solution coming…

The solution coming…

The Solution

截断做和

In short, it tells you a rule of thumb to handle this kind of question. For such kind of number XYZABC, if (sum XYZ and ABC) mod divisor equals 0 aka exact division then concludes that XYZABC / divisor is an exact division. In this problem, the answer is 573426 because (573 + 426) mod 999 is 0 aka exact division. Done.

But in terms of the slide of conclusion, I am skeptical because:

  • Is it a generalized “law” for every XYZABC over DEF?
  • Given a special case, 999999 over 999 is an exact division, also according to XYZ + ABC then 999 + 999 equals 1998 which is also exact division for 999 (quotient is 2, remainder is 0).
  • Also another special case, 999000 over 999 is an exact division too. It also matches XYZ + ABC over DEF is an exact division, then the whole number XYZABC over DEF is also exact division.
  • It shows a beautiful symmetry a 6-digit number over a 3-digit number, then first 3 digits + last 3 digits.
  • What if 99900 over 999? 99 + 900 equals 999, which is also an exact division for 999. Hence, obviously 99900 over 999 is an exact division. This is the 3rd special case.
  • I can’t enumerate any more special cases where 6-digit numbers have tons of tries. It’s daunting and can’t prove this is a generalized law. Maybe they are just coincidences for 999999, 999000 and 99900 over 999. On the other hand, it is like a hindsight that I know the XYZ + ABC can exactly divide DEF, then succeed luckily 3 special cases. In math, it is not convincing.

Proving Process from DeepSeek

I am struggled to prove the so-called law “截断做和”. So I feed the problem to the popular star DeepSeek of LLM recently. Surprisingly, DeepSeek performs a incredible, self-correcting logical processing on the problem in a very short time. Make sure you enable R1 so that DeepSeek can output the verbose thinking process. It’s really astonishing.

DeepSeek Analysis

How I Deeply Dive into DeepSeek’s Proof

I quote the key proof from DeepSeek:

Law

Do not be freak out by those math symbols, I will explain progressively.

We want to prove that for N can be exactly divided by a 999 when A + B is also exactly divided by 999, so that N MUST BE exactly divided by 999. This is generalized to every number.

Step 1 - Transform a 6-digit number

We want to figure a 6-digit number N can be exactly divided by 999. So N can be written into N = 1000 * A + B. TBH, this is a bit tricky, why do we pick first 3 digits and last 3 digits, but here maybe talking about a heuristic for a mathematician because the divider 999 is a 3-digit number and a dividend is a 6-digit number, they show a beautiful symmetry to lead to a thought that we transform the 6-digit number to be two groups: first 3 digit and last 3 digit for luck. In fact, DeepSeek’s processing is doing so.

Step 2 - Get rid of 1000 from the equation

In N = 1000 * A + B, if we can get rid of this number 1000, then that is perfect to the target (A + B) / 999 is an exact division. How to get rid of the factor 1000 becomes the current task. Here, 2 math theories about modulo (aka mod for short) and congruence modulo come into play.

Step 2.1 - What is modulo?

Modulo is a simple math concept that reveals another side of a division. It’s not a difficult concept.

An ordinary division, the operator is dividend ÷ divisor = quotient.

On the other hand of modulo, the operator is dividend mod divisor = remainder.

For example, dividend is 101 and divisor is 10, we have

101 ÷ 10 = 10 and

101 mod 10 = 1

A special rule is that if the dividend less than the divisor, the mod operation result is the dividend itself.

For example, 1 mod 999 since 1 < 999 so that the result is 1. Simple, isn’t it?

Step 2.2 - What is congruence modulo?

Congruence modulo is denoted using . It represents two numbers that share the same remainder.

For example, 1000 and 1, if they divide by 999, they result in the same remainder 1. In math, we denote that as 1≡1000(mod 999) where both 1 and 1000 over 999 result the same remainder 1.

Step 3 - OK, get back to prove the solution

Back to proving if A + B can be exactly divided by 999, then N is also exactly divided by 999. We have N = 1000 * A + B now, trying to get rid of 1000.

Since 1≡1000(mod 999) and logically 1*A≡1000*A(mod 999) by a law of congruence modulo. Because even though 1 and 1000 are times A, the effect is that their remainders are expanding equally A times. Imagine A = 10, so 10 and 10000 over 999, the remainder is 10 for both cases.

Then we can continue to add B in the equation, we get A + B≡1000A + B(mod 999). That is also true where their remainder are increasing equally plus B, the same.

At this point of time, simply we replace N with 1000A + B, we have the finally result A + B≡N(mod 999).

Translate that into Chinese - “有这层关系A+B和N对于除数999同余,而A是N的前三位,B是N的后三位,如果A+B整除999(就是余数是0),因为和N同余的关系,N也可以整除999, 所以A+B=999, 按照题目必须是573426!”

Step 4 - Final thought

All in all, this problem is just a well-crafted math gimmick. Think about it, the prerequisite has to have divisor is either 999 or 99 something because 1 and 1000 are congruence modulo against 999 but not other number even 998, so that we can assert 1≡1000(mod 999) or 1≡100(mod 99) then perform the brave move to replace 1000 or 100 with 1. And lastly, it ends up with the assertion N≡A+B(mod 999), which is dramatic.

Summary

Thanks for finishing reading this blog at this point. I hope you could probably get out of something like

  • Modulo
  • Congruent modulo
  • Mathematical analytical thinking
  • DeepSeek(or other LLM models) is really incredible. It should be your company in the course of learning anything. I am delighted to see how much impact it will reshape the learning paradigm of human being.

My First Blog

Enchante

Bonjour! This is my first blog. Strictly speaking, I have setup my personal static site for blogging. Tje site is presumed to be published during the Chinese New Year of Snake. First and foremost, I wish whoever accessing my site have a fortunate Snake Year in 2025.

Technically, I want to briefly share how to setup this site and I am looking forward to write more detailed as long as I understand more about the stack. The site is built on Zola, which is a Rust-based static site generator among the JAMStack. Unsurprisingly, Zola is expected to be blazingly fast as it is written by Rust. On the other hand, its usage is simple and straightforward. Regarding to the host platform, Zola has many choices on the table. I picked up the Netlify for reasons: 1) Netlify supports Zola stack 2) I purchased the DNS for this site, which is accessible in mainland China.

In terms of Netlify, it provides one-stop-shop for what static site needs including fetching code from Github repository, bespoke deployment script, purchasing domain name and DNS registration. The functionality can be found from Netlify Dashboard. Also, Zola has the integration guide for Netlify. I pause here and dive into details on next blog. By the way, the static site is theme by Terminimal, which is responsive.

So what is my plan to blogging? I manage to cover up these perspective of content.

Blogs that capture I am learning in daily basis

As a profressional software engineer recently, there are constantly stream of knowledge and practices about technology I encounter from work, from videos, from books etc. everyday. The massive volume of information gets messy if I can well manage them. Therefore, blogging could be a possible solution for them as soon as I learn them I will capture them in blogs. The content could be poor organized or not-yet-verified so that they may not be reliable. But that’s fine, I just need a place to capture them for distilling into knowledge later on.

Blogs for my references

When the opportunitiy comes up, I can distill the less organized blogs into well organized blog of knowledge. This gives me 2nd chance to grasp them firmly. Again, the site is public in the internet. I can access these content from my devices when I need them. At last, these blogs are also great showcases for potential readers who could benefit from or something unbelievable may happen.

Blogs for tutorial

I have been working on the industry for two decades. Frankly, I have a bunch of thoughts, knowledge and best practices in my mind to share. I could have formulated them into some tutorial that benefits people who are working in the industry and will be interested in stepping into.

On the other hand, I am moaning about the recent STEM education or typically those programming course for youth in the country wise. I will write up my thoughts about my moans about that from my observations. Hence, the first tutorial I am going to make is most likely about computer scenice for kids.

Lastly…

These blogs will be catagorized by repsective tags carefully. I would prefer to blog them in both English and Chinese for the same content to make potential audients happy. Yet, English version is the priority. Well, this is about tech indeed.

Happy blogging!