React Project Framework Upgrade
Although open source is free, version upgrades require caution. Upgrades do carry certain risks, but if you clearly understand what each upgrade entails [fix/feat/breaking change], these risks can be reduced or eliminated. From a long-term perspective, technology must always keep pace with the times, especially during product iterations.
The WEB project I’m currently working on has entered a new iteration phase, so I took some weekend time to perform framework upgrades.
Motivation
Upgrading isn’t just about changing version numbers of dependency modules, but about the changes behind those version numbers - functionality, performance, or design patterns.
Here are some areas I’m relatively concerned about
Key Areas of Concern
TypeScript
- Optional Chaining
For example, we have code like this
user.sayHello&&user.sayHello();
Because we can’t be sure if this property actually has a value, we write it this way, but now we can refactor it as follows
user?.sayHello();
- nullish coalescing
For example, we have code like this
const username=pete.username||alan.username
Now we can write it like this
const username=pete.username??alan.username
Isn’t this the same? Note that if the value is 0, there’s a fundamental difference - || treats 0 as false, while ?? strictly only recognizes null and undefined. So they are actually different.
React
- Scheduler
- lazy / Suspense
- Hooks
Other Benefits
- Because the versions are newer, documentation and bug tracking for the libraries themselves are easier to communicate and track
- For example, with the newer version of antd components, some new features become available
- According to official descriptions, react-redux v7 will have significant performance improvements
Issues Encountered During Upgrade
Upgrading is never just about changing some version numbers - there are always some pitfalls. Here are a few issues I encountered
Optional Chaining Syntax Causes Lint Errors
TypeScript’s new syntax will cause errors during lint detection, so lint also needs to be upgraded
Prettier New Version Configuration Default Value Changes
Note
trailingComma: none
react-dom and react Version Consistency Requirements
Note that when upgrading these two, ensure they are consistent, otherwise errors will occur
Of course, there were also some minor errors, such as type errors after Antd upgrade, which can be fixed accordingly.
Upgrade Packages
List of related upgrade packages
- TypeScript
~3.3.1 => ~3.8.3 - react
16.4.2=> 16.8.3 - react-dom
16.4.2 => 16.8.3 - react-redux
6.0.1 => 7.2.0 - antd
3.20.0=>3.26.13 - prettier
1.14.3=>^2.0.5 - tslint
5.18.0=>^6.1.1 - tslint-react
4.0.0=>^5.0.0
Final Thoughts
After upgrading, basic testing revealed no issues - perfect.
Upgrading is always a process of digging pitfalls, stepping into them, and then filling them. But there are several benefits:
- More future possibilities because the technology is sufficiently new
- Being able to upgrade smoothly means you’ve gained a deeper understanding and improvement in your familiarity with the relevant technologies.
So, just do it!
