The misunderstandings that a React developer often makes

React is a powerful library for making application UI. It is easy to learn and has many technical documents you can base on to gain reactive skills in a short time. But it also still easily has wrong assumptions about how React works and controls the synchronization between states and UI. Here is the list I made of the most commonly misunderstood about React.

1. The React components will ONLY re-render when the component's props or states change

This is the first thing to note when you have just started the React journey. The component does not only re-render when props or state change, but also when the parent component re-render also triggers the re-render of child components. When forgetting this point, it is error-prone to make the application's performance slow down when adding more features.

2. Your state will always be up to date between useEffects

In case your component has multiple useEffects and each useEffect updates the same state via setState. It is easy to assume each useEffect will have the latest updated version of that state when it running. Because React will schedule and re-render components asynchronously, all component's useEffects will only see the same version of that state. If you want to get the latest version of state, you should use setState(prev => {...})

3. The useEffect ONLY runs when any dependencies change.

Yes. The point here is useEffect NOT ONLY runs when any dependencies change, BUT ALSO AFTER components mount. so each useEffect will run at least 1 time. (in StrictMode, React will run component's useEffect an extra time to detect potential bugs)

4. The clean-up function of useEffect will ONLY RUN after the component unmounts.

The correct is the clean-up function will run before each time of useEffect re-run and after component unmounts.

Remember, understanding these nuances is crucial for writing robust React applications. In the next article, I will try to point out more incorrect things that React developers often fall into.