50 items
The Prop Drilling Problem Context Solves
Slides / VideoRe-rendering Behavior of Context Consumers
Slides / VideoReact.memo Won't Stop Context Re-renders
Code QuizNesting and Overriding Providers
Slides / VideoCustom Consumer Hook for Context
Slides / VideoCreating a Custom Provider Component
Slides / VideoContext with useReducer
Slides / VideoMemoizing Context Provider Values
Slides / VideoSplitting Contexts to Minimize Re-renders
Slides / VideoProviding Context Values with Provider
Slides / VideoCreating Context with createContext
Slides / VideoNested Providers and Shadowing
Code QuizUpdating Context via State
Code QuizContext.Consumer Render Prop
Code QuizPassing Updaters Through Context
Code QuizReading Context Outside the Provider
Code QuizDefault Value Without a Provider
Code QuizProviding a Context Value
Code QuizCreating a Context
Code QuizInverted Guard in Custom Context Hook
Code QuizInline Context Value Re-renders
Code QuizReducer Missing Default Case
Code QuizSwapped State and Dispatch Contexts
Code QuizdisplayName for DevTools
QuizContext Value Identity Pitfall
QuizDefault Value in createContext
QuizContext.Consumer Render Prop
QuizContext Re-render Behavior
QuizMemoizing Context Value
QuizContext with useReducer
QuizSplitting Contexts
QuizNested and Multiple Providers
QuizOverriding Context Values
QuizCustom Hook for Context
QuizWhen to Use Context
QuizProviding Context Values
QuizCreating a Context
QuizContext Limitations
FlashcardContext displayName
FlashcardNesting and Overriding Providers
FlashcardRe-render on Value Change
FlashcardThe value Prop
FlashcardProviding a Context
FlashcardCreating a Context
FlashcardContext.Consumer Render Prop
FlashcardContext with useReducer
FlashcardDefault Value in createContext
FlashcardCustom useContext Hook
FlashcardSplitting Contexts
FlashcardMemoizing Context Value
FlashcardDefault Value Without a Provider
The developer expected a default locale, but nothing shows up.
import { createContext, useContext } from 'react';
const LocaleContext = createContext();
function Greeting() {
const locale = useContext(LocaleContext);
return <p>Locale: {locale}</p>;
}
// No Provider anywhere in the tree
function App() {
return <Greeting />;
}The developer expected 'en' to display as a default. What is the bug?