ArchCase

Design · Practice · Interview

Loading…

Prop drilling and when you need context

TSsenior

The SettingsPage tree already exists in the project — user/theme/onLogout props are drilled through 4 levels. A colleague sent a PR adding dark mode: `isDarkMode` + `onToggleDarkMode` following the same pattern — drilled through every level. Walk the diff and suggest the right solution.

PR: lesson.tsx +25 −04 проблем

11 interface SettingsPageProps {

22 user: User

33 theme: Theme

4+ isDarkMode: boolean

5+ onToggleDarkMode: () => void

46 onLogout: () => void

57 }

79 export function SettingsPage(props: SettingsPageProps) {

810 return (

911 <div>

10- <Header user={props.user} onLogout={props.onLogout} />

11- <SettingsContent user={props.user} theme={props.theme} />

12+ <Header user={props.user} isDarkMode={props.isDarkMode} onLogout={props.onLogout} />

13+ <SettingsContent

14+ user={props.user}

15+ theme={props.theme}

16+ isDarkMode={props.isDarkMode}

17+ onToggleDarkMode={props.onToggleDarkMode}

18+ />

1219 </div>

1320 )

1421 }

1522

16-function SettingsContent({ user, theme }: {

23+function SettingsContent({ user, theme, isDarkMode, onToggleDarkMode }: {

1724 user: User

1825 theme: Theme

26+ isDarkMode: boolean

27+ onToggleDarkMode: () => void

1928 }) {

2029 return (

2130 <section>

2231 <ProfileSection user={user} theme={theme} />

23- <PreferencesSection user={user} theme={theme} />

32+ <PreferencesSection

33+ user={user}

34+ theme={theme}

35+ isDarkMode={isDarkMode}

36+ onToggleDarkMode={onToggleDarkMode}

37+ />

2438 </section>

2539 )

2640 }

2741

28-function PreferencesSection({ user, theme }: {

42+function PreferencesSection({ user, theme, isDarkMode, onToggleDarkMode }: {

2943 user: User

3044 theme: Theme

45+ isDarkMode: boolean

46+ onToggleDarkMode: () => void

3147 }) {

3248 return (

3349 <div>

3450 <UserPreferences user={user} theme={theme} />

51+ <ThemeToggle isDarkMode={isDarkMode} onToggle={onToggleDarkMode} />

3552 </div>

3653 )

3754 }

3855

3956 function UserPreferences({ user, theme }: { user: User; theme: Theme }) {

4057 return (

4158 <div style={{ color: theme.text }}>

4259 <p>User: {user.name}</p>

4360 </div>

4461 )

4562 }

63+

64+function ThemeToggle({ isDarkMode, onToggle }: { isDarkMode: boolean; onToggle: () => void }) {

65+ return (

66+ <button onClick={onToggle}>

67+ {isDarkMode ? '☀ Light' : '🌙 Dark'}

68+ </button>

69+ )

70+}

Шаг 1 из 6

When does prop drilling become a problem?

Prop drilling is fine **at 1–2 levels**. The problem starts when: 1. A prop passes through 3+ components that don't use it themselves. 2. Many components need the same value (theme, user, locale). 3. Adding a new cross-cutting parameter requires updating 5+ components. Solutions: - **Context** for UI state (theme, language, sidebar open). - **react-query / SWR** for server state (user, API data). - **Zustand / Redux** for complex global app state. - **Composition** (children props) when you can avoid global state altogether. Walk the code and find every drilled prop.