Synchronizing with External Systems and Subscriptions0%

Synchronizing with External Systems and Subscriptions

Beginner12 min read•Updated: Jul 11, 2026

Synchronizing with External Systems and Subscriptions

1. What is Synchronization in React?

The fundamental mental model of useEffect is synchronization.

An effect's job is not simply to run code on "mount" or "unmount"; its true responsibility is to synchronize the React component with an external non-React system:

A browser WebSocket connection
A browser Geolocation or Online/Offline network watcher
A third-party non-React widget (e.g., a Leaflet map, a Chart.js canvas, or a Stripe payment element)
The native browser DOM (e.g. modal focus trapping)

Output

1[React State / Props] ◄══════ Synchronize ══════► [External Non-React System]
2                                                        (WebSocket / Canvas / Browser API)

2. Example: Synchronizing with Browser Online Status

Web applications often need to warn users when their internet connection drops. The browser emits native online and offline events on the window object:

JSX

1import React, { useState, useEffect } from 'react';
2 
3export default function NetworkStatusIndicator() {
const [isOnline, setIsOnline] = useState(navigator.onLine);
5 
useEffect(() => {
  const handleOnline = () => setIsOnline(true);
  const handleOffline = () => setIsOnline(false);
9 
  // Synchronize: subscribe to browser events
  window.addEventListener('online', handleOnline);
  window.addEventListener('offline', handleOffline);
13 
  // Teardown: unsubscribe when component unmounts
  return () => {
    window.removeEventListener('online', handleOnline);
    window.removeEventListener('offline', handleOffline);
  };
}, []); // Synchronize on mount, clean up on unmount
20 
return (
  <div className={`status-banner ${isOnline ? 'online' : 'offline'}`}>
    <span className="dot" />
    {isOnline ? 'Connected to MSK Network' : 'Offline — Changes will sync when reconnected'}
  </div>
);
27}

3. Example: Synchronizing with a Real-Time WebSocket Channel

When connecting to a live messaging or financial stock channel:

JSX

1import React, { useState, useEffect } from 'react';
2 
3export default function StockTicker({ symbol }) {
const [price, setPrice] = useState(null);
5 
useEffect(() => {
  // 1. Establish connection to external WebSocket service
  const socket = new WebSocket(`wss://stocks.example.com/live/${symbol}`);
9 
  socket.onopen = () => {
    console.log(`Subscribed to live ticker: ${symbol}`);
  };
13 
  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    setPrice(data.currentPrice);
  };
18 
  socket.onerror = (err) => {
    console.error('Socket error:', err);
  };
22 
  // 2. Teardown: Close the socket when 'symbol' changes or component unmounts!
  return () => {
    console.log(`Unsubscribing from: ${symbol}`);
    socket.close();
  };
}, [symbol]); // Re-synchronize whenever the stock symbol changes
29 
return (
  <div className="ticker-card">
    <h4>{symbol}</h4>
    <p className="price-display">
      {price !== null ? `$${price.toFixed(2)}` : 'Connecting...'}
    </p>
  </div>
);
38}

If the user switches from AAPL to GOOGL:

1
React calls socket.close() on the AAPL socket.
2
React opens a brand new WebSocket for GOOGL.

4. The Mental Model: Start and Stop

Every effect synchronizing with an external system should have symmetric Start and Stop logic:

addEventListener $\leftrightarrow$ removeEventListener
socket.connect() $\leftrightarrow$ socket.close()
observer.observe() $\leftrightarrow$ observer.disconnect()
timer = setTimeout() $\leftrightarrow$ clearTimeout(timer)

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What is the primary mental model of useEffect in modern React architecture?

Question 2

Why must socket.close() be invoked in the return cleanup function of a WebSocket effect?

Question 3

What happens when the symbol prop changes in the StockTicker component?

Question 4

Which pair of methods represents a correct symmetric setup and teardown for a native browser event?

Question 5

If a component only needs to read navigator.onLine on initial mount and listens for changes until unmounted, what should its dependency array be?

Next Lesson

Removing Unnecessary useEffect Hooks

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Race Conditions and Stale Closures in useEffect	Removing Unnecessary useEffect Hooks

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext