UseEffect - Set up a subscription in a function component

detailed.tsx

import { useEffect, useState } from 'react';

function ComponentName() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Create a subscription
    const subscription = someDataStream.subscribe(data => {
      setData(data);
    });

    // Clean up the subscription when the component unmounts
    return () => {
      subscription.unsubscribe();
    };
  }, []); // The empty array specifies that this effect should only run once, on mount

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading data...</p>}
    </div>
  );
}

simple.tsx

useEffect(() => {
  // Create a subscription
  const subscription = someDataStream.subscribe(data => {
    setData(data);
  });

  // Clean up the subscription when the component unmounts
  return () => {
    subscription.unsubscribe();
  };
}, [prop]); // The prop is included in the dependencies array