-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

React Anti-Patterns
By :

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:
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...