# Unstable Connection

Indicate when a participant has unreliable connection. The [default `ParticipantViewUI`](https://getstream.io/video/docs/react/v2/ui-components/participants/participant-view/) shows a notification when connection quality is poor.

## Best Practices

- Only show warning for `ConnectionQuality.POOR` to avoid notification fatigue.
- Consider showing only for local participant (their own connection issues).
- Place notification prominently within `ParticipantViewUI`.

## Custom implementation

```tsx
import {
  SfuModels,
  useParticipantViewContext,
} from "@stream-io/video-react-sdk";

const PoorConnectionNotification = () => {
  const { participant } = useParticipantViewContext();
  const { connectionQuality, isLocalParticipant } = participant;

  if (
    isLocalParticipant &&
    connectionQuality === SfuModels.ConnectionQuality.POOR
  ) {
    return <div>Poor connection quality</div>;
  }
  return null;
};

export const CustomParticipantViewUI = () => {
  return (
    <>
      <PoorConnectionNotification />
      {/* your other custom UI elements */}
    </>
  );
};
```

## Final steps

Pass this custom `ParticipantViewUI` to layout components or `ParticipantView` as described in the [ParticipantView customizations guide](https://getstream.io/video/docs/react/v2/ui-cookbook/participant-view-customizations/).

```tsx {17}
import { useCallStateHooks, ParticipantView } from "@stream-io/video-react-sdk";

import { CustomParticipantViewUI } from "../ParticipantViewUI";
import { CustomVideoPlaceholder } from "../VideoPlaceholder";

export const CustomCallLayout = () => {
  const { useParticipants } = useCallStateHooks();
  const otherParticipants = useParticipants();

  return (
    <div>
      {/* your other custom UI elements */}
      {otherParticipants.map((participant) => (
        <div key={participant.sessionId}>
          <ParticipantView
            participant={participant}
            ParticipantViewUI={CustomParticipantViewUI}
            VideoPlaceholder={CustomVideoPlaceholder}
          />
        </div>
      ))}
    </div>
  );
};
```

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-cookbook/connection-unstable/](https://getstream.io/video/docs/react/v2/ui-cookbook/connection-unstable/).