Implementation:Langgenius Dify Context Factory

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Utilities
Last Updated	2026-02-12 07:00 GMT

Overview

Provides type-safe factory functions for creating React contexts with built-in missing-provider error detection.

Description

This utility module exports two factory functions -- createCtx and createSelectorCtx -- that wrap React's native createContext and useContext to produce contexts that throw descriptive errors when consumed outside their provider. Both factories use a sentinel Symbol to detect when no provider is present, eliminating the need for manual null checks. The returned value is a tuple [Provider, useContextValue, Context] augmented with named properties (.provider, .useContextValue, .context) for flexible destructuring. createSelectorCtx uses use-context-selector under the hood to enable fine-grained re-render optimization.

Usage

Use createCtx for standard React contexts where you want automatic error detection when the context is used without a wrapping provider. Use createSelectorCtx when components need to subscribe to only a portion of the context value to avoid unnecessary re-renders.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/utils/context.ts
Lines: 1-47

Signature

type CreateCtxOptions<T> = {
  defaultValue?: T
  name?: string
}

type CreateCtxReturn<T> = [Provider<T>, () => T, Context<T>] & {
  context: Context<T>
  provider: Provider<T>
  useContextValue: () => T
}

export const createCtx: <T>(options?: CreateCtxOptions<T>) => CreateCtxReturn<T>

export const createSelectorCtx: <T>(options?: CreateCtxOptions<T>) => CreateCtxReturn<T>

Import

import { createCtx, createSelectorCtx } from '@/utils/context'

I/O Contract

Inputs

Name	Type	Required	Description
options.defaultValue	`T`	No	Default value for the context; if omitted, accessing the context outside a provider throws an error
options.name	`string`	No	A descriptive name used in error messages when the context is consumed without a provider

Outputs

Name	Type	Description
[0] / provider	`Provider<T>`	The React context Provider component
[1] / useContextValue	`() => T`	A hook that returns the current context value or throws if no provider exists
[2] / context	`Context<T>`	The raw React Context object for advanced use cases

Usage Examples

Create a Standard Context

import { createCtx } from '@/utils/context'

interface AppContextValue {
  theme: string
  locale: string
}

const [AppProvider, useApp, AppContext] = createCtx<AppContextValue>({ name: 'App' })

// In a parent component:
// <AppProvider value={{ theme: 'dark', locale: 'en' }}>...</AppProvider>

// In a child component:
const { theme, locale } = useApp()

Create a Selector-Optimized Context

import { createSelectorCtx } from '@/utils/context'

interface StoreValue {
  count: number
  items: string[]
}

const [StoreProvider, useStore] = createSelectorCtx<StoreValue>({ name: 'Store' })

// Components using useStore() only re-render when the selected slice changes

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment