The Prop Drilling Problem

We add a small "favorites" feature and deliberately experience the pain of threading a value through several layers of objects just to reach where it is actually needed.

1. Learning Objective

2. Pre-Coding Quiz

Answer these before reading the concept explanation or writing any code. It is fine to get these wrong — that is the point. You need 4/5 to proceed to the lab.

3. The Concept — Experiencing the Prop Drilling Problem

Adding a feature that needs a deep reference

We want to toggle a country as a "favorite." The natural place for that state is on CountryExplorer (Session 16), but the trigger — a user action — originates from an outer App class, two composition layers up.

class CountryExplorer:
    def __init__(self, countries):
        self.countries = countries
        self.favorites = set()

    def toggle_favorite(self, country_name):
        if country_name in self.favorites:
            self.favorites.discard(country_name)
        else:
            self.favorites.add(country_name)


class MenuSection:
    def __init__(self, explorer):
        self.explorer = explorer   # MenuSection doesn't otherwise care about explorer at all


class App:
    def __init__(self, menu_section):
        self.menu_section = menu_section

    def handle_favorite_click(self, country_name):
        # App must reach two layers DOWN just to trigger this one action
        self.menu_section.explorer.toggle_favorite(country_name)

The pain gets worse as more layers are added

Add one more layer, and the forwarding chain grows — every intermediate class picks up a parameter and a line of code purely for something it does not itself use.

class NavigationPanel:
    def __init__(self, menu_section):
        self.menu_section = menu_section  # also forwarding, also unrelated to its own job


class App:
    def __init__(self, navigation_panel):
        self.navigation_panel = navigation_panel

    def handle_favorite_click(self, country_name):
        # now THREE layers deep, through TWO classes that have nothing to do with favorites
        self.navigation_panel.menu_section.explorer.toggle_favorite(country_name)

Naming the problem

This is "prop drilling" — a value or reference has to be threaded through several layers of a composed structure purely so it can reach a much deeper layer that actually needs it, coupling every intermediate layer to something conceptually unrelated to its own job. This exact problem, and exact name, appears in the original React course this curriculum is modeled on, because the underlying issue is not specific to any one language or framework.

This session deliberately does not fully solve it

Recognising the problem clearly — feeling the friction of App.navigation_panel.menu_section.explorer.toggle_favorite(...) firsthand — is the point. A future project might solve this with a shared state object, dependency injection, or another pattern, but reaching for a fix before understanding the actual problem tends to produce cargo-culted, poorly-understood code.

4. Lab

What you will build

A file called prop_drilling_lab.py.

Step-by-step instructions

# prop_drilling_lab.py
class Country:
    def __init__(self, name, region, population):
        self.name = name
        self.region = region
        self.population = population


class CountryExplorer:
    def __init__(self, countries):
        self.countries = countries
        self.favorites = set()

    def toggle_favorite(self, country_name):
        if country_name in self.favorites:
            self.favorites.discard(country_name)
        else:
            self.favorites.add(country_name)

class MenuSection:
    def __init__(self, explorer):
        self.explorer = explorer  # only exists to forward this reference downstream


class NavigationPanel:
    def __init__(self, menu_section):
        self.menu_section = menu_section  # same problem, one layer higher

class App:
    def __init__(self, navigation_panel):
        self.navigation_panel = navigation_panel

    def handle_favorite_click(self, country_name):
        self.navigation_panel.menu_section.explorer.toggle_favorite(country_name)


explorer = CountryExplorer(countries=[Country(name="Kenya", region="Africa", population=54000000)])
menu = MenuSection(explorer)
nav = NavigationPanel(menu)
app = App(nav)

app.handle_favorite_click("Kenya")
print(explorer.favorites)  # {'Kenya'} — it worked, but look at the path it took to get there

print("Layers forced to hold an explorer-related reference:", 3)
# App -> NavigationPanel -> MenuSection -> CountryExplorer

5. Expected Files Changed

6. Commit Checkpoint

Once the lab is complete and you can explain every line, make this exact commit:

git add prop_drilling_lab.py docs/sessions/session-39/index.html
git commit -m "session-39: deliberately experience and document the prop drilling problem"

7. Code Review Checklist

Go through your code line by line and check each item:

8. Post-Coding Quiz

Same 5 questions. Take it again now that you have written and run the code. You need 4/5 to mark this session complete.

9. Reflection Questions

Think through these after the post-quiz. No right answer — they are for discussion.

10. What Breaks If This Knowledge Is Missing?

11. What We Learned