𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀
Stop using useEffect for everything. Many developers misuse this hook. This creates bugs and makes code hard to read.
Limit useEffect usage.
Try to use one useEffect per page. Using many hooks for the same state causes confusion. You lose track of which hook updates which state.
Stop using useEffect for user events.
Do not use useEffect for clicks or taps. Use event handlers instead.
- Bad: Using useEffect to update state after a click.
- Good: Use a function like onClickBar to update state.
Event types you should know:
- Page navigation and initial renders.
- Network connection changes.
- WebSocket or real-time server updates.
User actions like clicks do not belong in useEffect. Use direct event handlers for these actions.
Split components by props.
If you use a boolean prop to change logic, split your component. Do not build one component that handles both creating and updating data.
A single component with many "if" statements grows too large. This makes the app hard to maintain.
- Bad: One component with an "isAdd" prop that changes form fields.
- Good: Create a "RegisterComponent" and an "UpdateComponent."
Small components are easier to test. They run faster. They stay clean.
Source: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31