Exploring the prop drilling issue

Prop drilling is an issue that arises when you have to pass data through multiple levels of components that don’t need the data, just so it can reach a component deeper in the hierarchy that does need it. This often makes the code harder to follow, understand, and maintain.

Consider a standard scenario in React where we have a universal searchable list component. This component takes in a list and displays each item, whether it’s a list of books, menus, tickets, or anything else you can think of. In addition to displaying the list, the component also includes a search box, allowing users to easily filter through a lengthy list:

Figure 8.3: The searchable list component

At first glance, the implementation seems straightforward and not overly complicated:

import React, { ChangeEvent, useState } from "react";
export type Item = {
  id: string;
  name: string;
  description...