React Native Academy · درس

إنشاء Context وتوفيره

أنشئ React context باستخدام createContext، وغلّف شجرة المكوّنات داخل Provider الخاص به، ومرّر قيمة أولية يمكن لجميع العناصر الفرعية قراءتها.

إنشاء Context وتوفيره درس مجاني في React Native Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Native Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Native Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

The Prop Drilling Problem

Prop drilling occurs when data needs to pass through many layers of components that do not use it themselves — they only pass it down to their children. For example, a user's authentication status might need to reach a deeply nested profile icon component, requiring it to be threaded through five intermediate components. The Context API solves this.

What is the Context API?

React's Context API lets you create a data channel that any component in the tree can subscribe to, regardless of how deeply nested it is. A Provider component supplies the value, and any descendant can read it with the useContext hook — no props required. It is built into React with no extra library needed.

Creating a Context with createContext

Call React.createContext(defaultValue) to create a context object. The defaultValue is only used when a component reads the context but has no matching Provider above it in the tree. In practice you almost always provide a value via the Provider, so the default is mainly used in tests.

import { createContext } from 'react';

// Create the context with a default value
export const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
});

The Context Provider Component

Every context object comes with a .Provider component. Wrap the part of your component tree that needs access to the context with ThemeContext.Provider. Pass the current value via the value prop. All descendants of the Provider can now read this value.

import { ThemeContext } from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('light');

  const value = {
    theme,
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light'),
  };

  return (
    <ThemeContext.Provider value={value}>
      <NavigationContainer>
        <MainStack />
      </NavigationContainer>
    </ThemeContext.Provider>
  );
}

The Context Value Can Be Anything

The value you pass to the Provider can be any JavaScript value: a string, number, object, array, or function. In practice it is almost always an object that bundles both the current state and the functions to update it, keeping related data and behavior together.

// Simple string context
export const LanguageContext = createContext('en');

// Complex object context (more common)
export const UserContext = createContext({
  user: null,
  isAuthenticated: false,
  login: () => {},
  logout: () => {},
});

Building a Reusable Context Provider

A common pattern is creating a separate Provider component that encapsulates the state and updater functions. Export both the context and the provider from the same file. This keeps all the context logic in one place and makes the provider easy to compose with other providers in the app root.

import { createContext, useState } from 'react';

export const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Using the Provider in App.js

Wrap your app (or the subtree that needs the context) with the Provider component. Place global providers near the top of the tree — usually wrapping the navigation container. You can stack multiple providers and they will all be available to their descendants.

import { AuthProvider } from './context/AuthContext';
import { ThemeProvider } from './context/ThemeContext';

export default function App() {
  return (
    <ThemeProvider>
      <AuthProvider>
        <NavigationContainer>
          <MainStack />
        </NavigationContainer>
      </AuthProvider>
    </ThemeProvider>
  );
}

Multiple Contexts in the Same App

You can have as many contexts as needed. Common real-world contexts include: AuthContext for the logged-in user, ThemeContext for color scheme, CartContext for e-commerce, NotificationContext for push notification state. Keep each context focused on one concern to avoid re-render cascades when unrelated values change.

When Context Re-renders Consumers

Every time the Provider's value prop changes reference, all consumers re-render. If the value is an object literal created inline, it is a new reference on every parent render — even if the content is the same. You will learn to fix this with memoization in a later lesson, but understanding the trigger is the first step.

// Bad: new object on every render — all consumers re-render unnecessarily
<ThemeContext.Provider value={{ theme, toggleTheme }}>

// Better: memoize the value object
const value = useMemo(() => ({ theme, toggleTheme }), [theme]);

Nested Providers Override Values

If you nest two Providers of the same context, the inner Provider's value overrides the outer one for all descendants inside it. This lets you override context values for specific subtrees — useful for themes in a modal, or a different user scope in a section of the app.

// Outer provider: theme='light'
<ThemeContext.Provider value={{ theme: 'light' }}>
  <View>
    {/* Inner override for a modal: theme='dark' */}
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      <Modal />
    </ThemeContext.Provider>
  </View>
</ThemeContext.Provider>

A Custom useAuth Hook

Encapsulate context access in a custom hook for a cleaner API. Export a useAuth hook that calls useContext(AuthContext). Add a guard to throw a helpful error if the hook is used outside of the AuthProvider, catching configuration mistakes early during development.

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// Usage in any component
const { user, logout } = useAuth();

Quick Check

Test your understanding of creating and providing context from this lesson.

Lesson Recap

In this lesson you learned: createContext creates a context object with an optional default value, the Provider component supplies a value to all descendants, and encapsulate provider logic and updater functions in a dedicated Provider component. Next up we explore consuming context with the useContext hook.

الأسئلة الشائعة

هل درس «إنشاء Context وتوفيره» مجاني؟

نعم — نص درس «إنشاء Context وتوفيره» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Native Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Native Academy 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء Context وتوفيره»؟

أنشئ React context باستخدام createContext، وغلّف شجرة المكوّنات داخل Provider الخاص به، ومرّر قيمة أولية يمكن لجميع العناصر الفرعية قراءتها. تتمرن على React Native Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Native Academy؟

لا تُشترط خبرة سابقة. React Native Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إنشاء Context وتوفيره»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Native Academy هذا؟

نعم. كل درس في React Native Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Native Academy