diff --git a/README.md b/README.md
index ae41aa8..647c702 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ The core JavaScript client emits various types of events depending on internal a
 NOTE: `FlagProvider` uses these internal events to provide information through `useFlagsStatus`.
 
 ```jsx
-import { useUnleashContext, useFlag } from '@unleash/proxy-client-react';
+import { useUnleashClient, useFlag } from '@unleash/proxy-client-react';
 
 const MyComponent = ({ userId }) => {
   const client = useUnleashClient();
diff --git a/package.json b/package.json
index ccbe371..a89eb22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unleash/proxy-client-react",
-  "version": "4.5.2",
+  "version": "5.0.0-rc.0",
   "description": "React interface for working with unleash",
   "type": "module",
   "main": "./dist/unleash-react.umd.cjs",
diff --git a/src/FlagContext.ts b/src/FlagContext.ts
index 537720f..dd0cfc5 100644
--- a/src/FlagContext.ts
+++ b/src/FlagContext.ts
@@ -17,6 +17,6 @@ export interface IFlagContextValue
   >;
 }
 
-const FlagContext = React.createContext<IFlagContextValue>(null as never);
+const FlagContext = React.createContext<IFlagContextValue | null>(null);
 
 export default FlagContext;
diff --git a/src/FlagProvider.test.tsx b/src/FlagProvider.test.tsx
index 4061eed..8c8d679 100644
--- a/src/FlagProvider.test.tsx
+++ b/src/FlagProvider.test.tsx
@@ -1,9 +1,9 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import { type Mock } from 'vitest';
 import { UnleashClient, type IVariant, EVENTS } from 'unleash-proxy-client';
 import FlagProvider from './FlagProvider';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 import '@testing-library/jest-dom';
 
 const getVariantMock = vi.fn().mockReturnValue('A');
@@ -44,8 +44,7 @@ vi.mock('unleash-proxy-client', async (importOriginal) => {
 const noop = () => {};
 
 const FlagConsumerAfterClientInit = () => {
-  const { updateContext, isEnabled, getVariant, client, on } =
-    useContext(FlagContext);
+  const { updateContext, isEnabled, getVariant, client, on } = useFlagContext();
   const [enabled, setIsEnabled] = useState(false);
   const [variant, setVariant] = useState<IVariant | null>(null);
   const [context, setContext] = useState<any>('nothing');
@@ -71,8 +70,7 @@ const FlagConsumerAfterClientInit = () => {
 };
 
 const FlagConsumerBeforeClientInit = () => {
-  const { updateContext, isEnabled, getVariant, client, on } =
-    useContext(FlagContext);
+  const { updateContext, isEnabled, getVariant, client, on } = useFlagContext();
   const [enabled, setIsEnabled] = useState(false);
   const [variant, setVariant] = useState<IVariant | null>(null);
   const [context, setContext] = useState<any>('nothing');
@@ -162,8 +160,7 @@ test('A memoized consumer should not rerender when the context provider values a
   const renderCounter = vi.fn();
 
   const MemoizedConsumer = React.memo(() => {
-    const { updateContext, isEnabled, getVariant, client, on } =
-      useContext(FlagContext);
+    const { updateContext, isEnabled, getVariant, client, on } = useFlagContext();
 
     renderCounter();
 
diff --git a/src/integration.test.tsx b/src/integration.test.tsx
index 7205e6e..6ef6652 100644
--- a/src/integration.test.tsx
+++ b/src/integration.test.tsx
@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { EVENTS, UnleashClient } from 'unleash-proxy-client';
 import FlagProvider from './FlagProvider';
 import useFlagsStatus from './useFlagsStatus';
 import { act } from 'react-dom/test-utils';
 import useFlag from './useFlag';
+import { useFlagContext } from './useFlagContext';
 import useVariant from './useVariant';
-import FlagContext from './FlagContext';
 
 const fetchMock = vi.fn(async () => {
   return Promise.resolve({
@@ -89,7 +89,7 @@ test('should render toggles', async () => {
 
 test('should be ready from the start if bootstrapped', () => {
   const Component = React.memo(() => {
-    const { flagsReady } = useContext(FlagContext);
+    const { flagsReady } = useFlagContext();
 
     return <>{flagsReady ? 'ready' : ''}</>;
   });
@@ -183,7 +183,7 @@ test('should render limited times when bootstrapped', async () => {
 
   const Component = () => {
     const enabled = useFlag('test-flag');
-    const { flagsReady } = useContext(FlagContext);
+    const { flagsReady } = useFlagContext();
 
     renders += 1;
 
@@ -229,7 +229,7 @@ test('should resolve values before setting flagsReady', async () => {
 
   const Component = () => {
     const enabled = useFlag('test-flag');
-    const { flagsReady } = useContext(FlagContext);
+    const { flagsReady } = useFlagContext();
 
     renders += 1;
 
diff --git a/src/useFlag.ts b/src/useFlag.ts
index 8e13ea8..e853b95 100644
--- a/src/useFlag.ts
+++ b/src/useFlag.ts
@@ -1,8 +1,8 @@
-import { useContext, useEffect, useState, useRef } from 'react';
-import FlagContext from './FlagContext';
+import { useEffect, useState, useRef } from 'react';
+import { useFlagContext } from './useFlagContext';
 
 const useFlag = (featureName: string) => {
-  const { isEnabled, client } = useContext(FlagContext);
+  const  { isEnabled, client }  = useFlagContext();
   const [flag, setFlag] = useState(!!isEnabled(featureName));
   const flagRef = useRef<typeof flag>();
   flagRef.current = flag;
diff --git a/src/useFlagContext.test.ts b/src/useFlagContext.test.ts
new file mode 100644
index 0000000..8178cf3
--- /dev/null
+++ b/src/useFlagContext.test.ts
@@ -0,0 +1,17 @@
+import { renderHook } from '@testing-library/react-hooks/native';
+import FlagProvider from "./FlagProvider";
+import { useFlagContext } from "./useFlagContext";
+
+test("throws an error if used outside of a FlagProvider", () => {
+    const { result } = renderHook(() => useFlagContext());
+    
+    expect(result.error).toEqual(
+        Error("This hook must be used within a FlagProvider")
+    );
+});
+
+test("does not throw an error if used inside of a FlagProvider", () => {
+    const { result } = renderHook(() => useFlagContext(), { wrapper: FlagProvider });
+    
+    expect(result.error).toBeUndefined();
+});
diff --git a/src/useFlagContext.ts b/src/useFlagContext.ts
new file mode 100644
index 0000000..d60c83d
--- /dev/null
+++ b/src/useFlagContext.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import FlagContext from './FlagContext';
+
+export function useFlagContext() {
+    const context = useContext(FlagContext);
+    if (!context) {
+      throw new Error('This hook must be used within a FlagProvider');
+    }
+    return context;
+}
diff --git a/src/useFlags.ts b/src/useFlags.ts
index 1630144..7a10748 100644
--- a/src/useFlags.ts
+++ b/src/useFlags.ts
@@ -1,8 +1,8 @@
-import { useContext, useEffect, useState } from 'react';
-import FlagContext from './FlagContext';
+import { useEffect, useState } from 'react';
+import { useFlagContext } from './useFlagContext';
 
 const useFlags = () => {
-  const { client } = useContext(FlagContext);
+  const { client } = useFlagContext();
   const [flags, setFlags] = useState(client.getAllToggles());
 
   useEffect(() => {
diff --git a/src/useFlagsStatus.ts b/src/useFlagsStatus.ts
index 5e1cda6..1e0c697 100644
--- a/src/useFlagsStatus.ts
+++ b/src/useFlagsStatus.ts
@@ -1,10 +1,8 @@
 /** @format */
-
-import { useContext } from 'react';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 
 const useFlagsStatus = () => {
-  const { flagsReady, flagsError } = useContext(FlagContext);
+  const { flagsReady, flagsError } = useFlagContext();
 
   return { flagsReady, flagsError };
 };
diff --git a/src/useUnleashClient.ts b/src/useUnleashClient.ts
index fae34d5..edcd46a 100644
--- a/src/useUnleashClient.ts
+++ b/src/useUnleashClient.ts
@@ -1,8 +1,7 @@
-import { useContext } from 'react';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 
 const useUnleashClient = () => {
-  const { client } = useContext(FlagContext);
+  const { client } = useFlagContext();
   return client;
 };
 
diff --git a/src/useUnleashContext.ts b/src/useUnleashContext.ts
index 477cce7..c1da10f 100644
--- a/src/useUnleashContext.ts
+++ b/src/useUnleashContext.ts
@@ -1,8 +1,7 @@
-import { useContext } from 'react';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 
 const useUnleashContext = () => {
-  const { updateContext } = useContext(FlagContext);
+  const { updateContext } = useFlagContext();
 
   return updateContext;
 };
diff --git a/src/useVariant.ts b/src/useVariant.ts
index f99e18e..90980d1 100644
--- a/src/useVariant.ts
+++ b/src/useVariant.ts
@@ -1,6 +1,6 @@
-import { useContext, useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { IVariant } from 'unleash-proxy-client';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 
 export const variantHasChanged = (
     oldVariant: IVariant,
@@ -17,7 +17,7 @@ export const variantHasChanged = (
 };
 
 const useVariant = (featureName: string): Partial<IVariant> => {
-  const { getVariant, client } = useContext(FlagContext);
+  const { getVariant, client } = useFlagContext();
 
   const [variant, setVariant] = useState(getVariant(featureName));
   const variantRef = useRef<typeof variant>({