0Pricing
Vue Academy · Lesson

The Prop Drilling Problem

Why prop drilling hurts maintainability, what provide/inject solves, when to use it.

What Is Prop Drilling

Prop drilling is passing data through many layers of components just to reach a deeply nested one. Each intermediate component must accept and forward the prop even if it never uses it.

A Deep Component Tree

Imagine a tree: App -> Layout -> Page -> Section -> Widget. The Widget at the bottom needs the current theme, but only App at the top knows it.

App
  Layout
    Page
      Section
        Widget  <-- needs "theme"

All lessons in this course

  1. The Prop Drilling Problem
  2. provide() in Parent Components
  3. inject() in Child Components
  4. Provide/Inject for App-Level State
← Back to Vue Academy