Prop Drilling

Definition

When a piece of information has to be passed down through many layers of building blocks just to reach the one that actually needs it. The blocks in the middle have to lug it along even though they don't use it themselves: usually a sign that there's a tidier way to share that data.

More from React & Frontend

• Bundle

  When a website is ready to be put online, all of its hundreds of small code files are squeezed and stitched together into one (or a few) compact files. That packaged-up result is the bundle. Smaller bundles mean faster page loads.

• Component

  A reusable building block of a website or app. Think of a 'Like' button or a product card: once it's built, you can drop it into any page and it works the same way every time. Most modern apps are made by snapping these blocks together.

• Context

  A way to share information across an entire app without passing it through every single building block by hand. It's like setting one master switch, for the theme, the logged-in user, the chosen language, that any part of the app can read whenever it needs to.

• Controlled Component

  A form field, a text box, a checkbox, a dropdown, whose value is being watched and managed by the rest of the app, rather than just floating freely on the page. The app always knows exactly what's typed in, character by character.

• CSR (Client-Side Rendering)

  A way of building websites where the browser receives a mostly empty page plus a chunk of code, then assembles the visible content right there on your device. The first load can feel slow because nothing is visible until the code finishes running, but after that, moving between pages is snappy.

• Hook

  A small helper that lets a building block remember things, react to changes, or do work in the background. There are different hooks for different jobs: one for remembering values, one for running setup code, one for tapping into shared settings.