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