When transitioning from classes to hooks, there are a few rules:
First, a few changes need to be done in the class component:
- remove as much code as possible from the constructor,
componentDid<Cycle>instead of unsafe
|Instead of||Use these|
I recommend you to check react's doc if you want more informations on the deprecation of these methods.
Then those are the main hooks you will want to use:
- use one
useStatehook per field in the state,
- use local variables instead of attributes / methods.
If those aren't enough, these are the final rules:
- if using local variables isn't possible, use
useCallbackfor methods and
useReffor refs or if you need to mutate a method/attribute in different places without triggering a re-render,
- and if you need a
useEffectthat runs synchronously after each render (for specific ui interactions), use