Understanding the Closure Trap of React Hooks

Digging into the classic problem

Now when we develop React projects, we generally use Hooks.

But in the development process, we often encounter some problems. The most classic problem is the closure trap of React Hooks.

Some friends may have encountered similar problems, but they may not understand this problem from the underlying principles of React. Here let’s discuss this topic together.

The Problem

This is a simple React app:

We use useState to create a count state, and continually increase the value of count in the first useEffect, then print the latest value of count in another useEffect at the same time.

How do you think the console output will be?

Here is the result: