tion is defined _inside_ a component so it is different
on every re-render:

    
    
    function ChatIndicator() {  
    
    
      const isOnline = useSyncExternalStore(subscribe, getSnapshot);  
    
    
        
    
    
      // 🚩 Always a different function, so React will resubscribe on every re-render  
    
    
      function subscribe() {  
    
    
        // ...  
    
    
      }  
    
    
      
    
    
      // ...  
    
    
    }

React will resubscribe to your store if you pass a different ` subscribe `
function between re-renders. If this causes performance issues and you’d like
to avoid resubscribing, move the ` subscribe ` function outside:

    
    
    function ChatIndicator() {  
    
    
      const isOnline = useSyncExternalStore(subscribe, getSnapshot);  
    
    
      // ...  
    
    
    }  
    
    
      
    
    
    // ✅ Always the same function, so React won't need to resubscribe  
    
    
    function subscribe() {  
    
    
      // ...  
    
    
    }

Alternatively, wrap ` subscribe ` into [ ` useCallback `
](/reference/react/useCallback) to only resubscribe when some argument
changes:

    
    
    function ChatIndicator({ userId }) {  
    
    
      const isOnline = useSyncExternalStore(subscribe, getSnapshot);  
    
    
        
    
    
      // ✅ Same function as long as userId doesn't change  
    
    
      const subscribe = useCallback(() => {  
    
    
        // ...  
    
    
      }, [userId]);  
    
    
      
    
    
      // ...  
    
    
    }

[ Previous  useState  ](/reference/react/useState) [ Next  useTransition
](/reference/react/useTransition)

* * *

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 
  * ` useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) `
  * Usage 
  * Subscribing to an external store 
  * Subscribing to a browser API 
  * Extracting the logic to a custom Hook 
  * Adding support for server rendering 
  * Troubleshooting 
  * I’m getting an error: “The result of ` getSnapshot ` should be cached” 
  * My ` subscribe ` function gets called after every re-render