Rules for managing side effects in react

Rules for managing side effects in react

When a component renders, it should do so without running into any side effects

If a side effect is triggered by an event, put that side effect in an event handler

If a side effect is synchronizing your component with some outside system, put that side effect inside useEffect Rule

If a side effect is synchronizing your component with some outside system and that side effect needs to run before the browser paints the screen, put that side effect inside useLayoutEffect

If a side effect is subscribing to an external store, use the useSyncExternalStore hook