devmeetings-react-ts-fork
  • Devmeeting React + Typescript
  • Speed dating
  • Typescript
    • It's just JavaScript
    • Basic types
    • Typing objects
    • Typing functions
    • Modules
    • Generics
    • Tasks
  • Hello React
    • Quick look around
    • The first component
    • JSX
    • Tasks
  • Components & Props
    • Small components
    • Passing data to a component
    • Loops in JSX
    • Tasks
  • Stateful components
    • Handling events
    • Components with internal state
    • Talking to a parent component
    • Smart and dumb components
    • Before the break
    • Tasks
  • Side-effects and context
    • Side-effects
    • Prop drilling
    • Using context
    • Tasks
  • What's next
    • Styling
    • Learning component's lifecycle
    • State Management
Powered by GitBook
On this page
  • Solutions
  • Resources

Was this helpful?

  1. Side-effects and context

Prop drilling

PreviousSide-effectsNextUsing context

Last updated 5 years ago

Was this helpful?

Prop drilling is a problem that is not unique to React: when the component tree gets bigger there's an issue of passing unwanted data through multiple components even though its only required by one of them.

Solutions

Until recently the context was an unofficial API, used mostly by libraries, so regular users chose more advanced state management solutions, like Flux, Redux, and MobX.

In result, those libraries were overused and installed even in smaller projects they were not exactly meant for.

With the introduction of React Hooks the context API became official and standardized.

Resources

React Anti-Pattern: Prop-Drilling
Prop drilling is not discouraged
distant components