React createContext

`createContext` creates a React context object for making a value available to components without passing it through every intermediate component. Components read the current context value with APIs such as `useContext`.

`createContext` is used when several components need access to the same value, such as a theme, locale, or authenticated-user information. It returns a context object that acts as the shared channel between providers and consumers.

A provider supplies the value for part of the component tree. In modern React, this is commonly written as `<SomeContext value={value}>...</SomeContext>`; React versions that support the newer provider syntax also support the traditional `<SomeContext.Provider value={value}>` form.

A component can consume the nearest provider's value with `useContext(SomeContext)`. If no matching provider exists above it, React uses the default value supplied when the context was created.

Context helps avoid prop drilling, but it does not automatically make application state global or eliminate the need for state management. When the provider's `value` changes, components consuming that context can re-render, so the value should be designed carefully for performance-sensitive applications.

Key points

• `createContext(defaultValue)` creates a context object.
• A provider supplies the context value to descendants.
• `useContext` reads the nearest available provider value.
• Without a provider, consumers receive the context's default value.
• Context is useful for shared tree-level values, but it is not itself a state-management system.

Interview questions

What value does `useContext` return if there is no provider?

It returns the default value specified when the context was created with `createContext`. For example, `createContext('light')` causes a consumer without a matching provider above it to receive `"light"`. The default is therefore an important part of the context's fallback behavior.

What does `createContext` do in React?

`createContext` creates a context object that allows a value to be shared with descendant components. A provider supplies the value, and consumers can read it without receiving it through every intermediate component's props. The context also has a default value used when no matching provider is found.

Why would you use Context instead of passing props?

Context is useful when the same value is needed by many components at different depths in a tree. It avoids passing a prop through components that do not actually use the value. Props are often clearer when the data is needed by only a small, direct component hierarchy.

How does React determine which context value a component receives?

A context consumer reads the value from the nearest matching provider above it in the rendered tree. If providers are nested, the inner provider overrides the value for its subtree. If no matching provider exists, the context's default value is used.

What performance issue can Context introduce?

Consumers of a context can re-render when the context value they depend on changes. A provider that creates a new object or function on every render can therefore cause avoidable updates for consumers. For performance-sensitive cases, developers may split contexts or stabilize provider values when appropriate.