mthanh2209
commented
9 months ago - Why and how to remove unnecessary Effects from your components
- Why: Unnecessary effects can lead to performance issues, as they might execute code on every render. If an effect doesn't depend on any changing variables or state, it might be unnecessary.
- How: You can remove unnecessary effects by carefully reviewing the dependencies array in the useEffect hook. Ensure that you include only the variables that the effect relies on.
- How to cache expensive computations without Effects
- Using other state variables or refs to store the result of the computation.
- This way, you can avoid recalculating it on every render.
- How to share logic between event handlers
- Extract the shared logic into separate functions outside of the event handlers. Then, you can call these functions within your event handlers.
- Alternatively, consider creating a custom hook to encapsulate and share the logic between components.
- How to notify parent components about changes
- Pass callback functions as props from the parent to the child components.
- When a change occurs in the child component, call the callback function, passing relevant data.
- This allows the parent component to respond to changes in the child component.
vercel[bot]