your component’s visual output? If you need to keep track
of some data that isn’t used by rendering, a [ ref
](/reference/react/useRef#referencing-a-value-with-a-ref) (which doesn’t
trigger re-renders) might be more appropriate. Verify your Effect doesn’t
update the state (and trigger re-renders) more than needed.

Finally, if your Effect is updating the state at the right time, but there is
still a loop, it’s because that state update leads to one of the Effect’s
dependencies changing. [ Read how to debug dependency changes.
](/reference/react/useEffect#my-effect-runs-after-every-re-render)

* * *

###  My cleanup logic runs even though my component didn’t unmount

The cleanup function runs not only during unmount, but before every re-render
with changed dependencies. Additionally, in development, React  runs
setup+cleanup one extra time immediately after component mounts.

If you have cleanup code without corresponding setup code, it’s usually a code
smell:

    
    
    useEffect(() => {  
    
    
      // 🔴 Avoid: Cleanup logic without corresponding setup logic  
    
    
      return () => {  
    
    
        doSomething();  
    
    
      };  
    
    
    }, []);

Your cleanup logic should be “symmetrical” to the setup logic, and should stop
or undo whatever setup did:

    
    
      useEffect(() => {  
    
    
        const connection = createConnection(serverUrl, roomId);  
    
    
        connection.connect();  
    
    
        return () => {  
    
    
          connection.disconnect();  
    
    
        };  
    
    
      }, [serverUrl, roomId]);

[ Learn how the Effect lifecycle is different from the component’s lifecycle.
](/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect)

* * *

###  My Effect does something visual, and I see a flicker before it runs

If your Effect must block the browser from [ painting the screen,
](/learn/render-and-commit#epilogue-browser-paint) replace ` useEffect ` with
[ ` useLayoutEffect ` ](/reference/react/useLayoutEffect) . Note that **this
shouldn’t be needed for the vast majority of Effects.** You’ll only need this
if it’s crucial to run your Effect before the browser paint: for example, to
measure and position a tooltip before the user sees it.

[ Previous  useDeferredValue  ](/reference/react/useDeferredValue) [ Next
useId  ](/reference/react/useId)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md)

[ Meet the Team ](/community/team)

[ Docs Contributors ](/community/docs-contributors)

[ Acknowledgements ](/community/acknowledgements)

More

[ Blog ](/blog)

[ React Native ](https://reactnative.dev/)

[ Privacy ](https://opensource.facebook.com/legal/privacy)

[ Terms ](https://opensource.fb.com/legal/terms/)

[ ](https://www.facebook.com/react) [ ](https://twitter.com/reactjs) [
](https://github.com/facebook/react)

##  On this page

  * Overview 
  * Reference 
  * ` useEffect(setup, dependencies?) `
  * Usage 
  * Connecting to an external system 
  * Wrapping Effects in custom Hooks 
  * Controlling a non-React widget 
  * Fetching data with Effects 
  * Specifying reactive dependencies 
  * Updating state based on previous state from an Effect 
  * Removing unnecessary object dependencies 
  * Removing unnecessary function dependencies 
  * Reading the latest props and state from an Effect 
  * Displaying different content on the server and the