LiveKit docs › Concepts › LiveKitRoom component

---

# Room Context Setup

While the `LiveKitRoom` component has historically been used as the root of LiveKit applications, we recommend using the `RoomContext.Provider` directly for more control over room lifecycle and state management. This approach gives you more flexibility while still providing the necessary context for LiveKit components.

```tsx
import * as React from 'react';
import { RoomContext } from '@livekit/components-react';
import { Room } from 'livekit-client';

const MyLiveKitApp = () => {
  const [room] = useState(() => new Room({}));
  
  // You can manage room connection lifecycle here
  useEffect(() => {
    room.connect('your-server-url', 'your-token');
    return () => {
      room.disconnect();
    };
  }, [room]);

  return (
    <RoomContext.Provider value={room}>
      {/* Your components go here */}
    </RoomContext.Provider>
  );
};

```

This pattern offers several advantages:

1. Direct control over Room instantiation and configuration
2. Explicit connection lifecycle management
3. Ability to handle connection states and errors more granularly
4. Better integration with application state management

All LiveKit components that previously worked with `LiveKitRoom` will work identically with this setup, as they rely on the `RoomContext` being available in the component tree.

---

This document was rendered at 2026-06-07T11:34:11.814Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/concepts/livekit-room-component.md](https://docs.livekit.io/reference/components/react/concepts/livekit-room-component.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).