Eliminating Props Drilling | Frontend Fundamentals

[giscus[bot]]

Eliminating Props Drilling | Frontend Fundamentals

A guide for easily modifiable frontend code

https://frontend-fundamentals.com/en/code/examples/item-edit-modal.html

[graup]

Another way to eliminate props drilling and coupling is the slot pattern. This is also a kind of inversion of control (moving control further up the tree).

Here's a contrived example. This pattern really becomes useful when the involved components are complex and largely unrelated.

Before:

function Title({ title, type }: { title: string; type: string }) {
  return <h1>{type}: {title}</h1>;
}

// Bad: this component is now coupled to the Title component.
function SomethingWithTitle({ title, titleType }: { title: string, titleType: string }) {
  return <div> .... <Title title={title} type={titleType} /></div>;
}

// Usage: <SomethingWithTitle title="Foo" titleType="Warning" />

After:

function Title({ title, type }: { title: string; type: string }) {
  return <h1>{type}: {title}</h1>;
}

// Good: Title component can change without having to change this component. 
function SomethingWithTitle({ title }: { title: ReactNode }) {
  return <div> .... {title}</div>;
}

// Usage: <SomethingWithTitle title={<Title title="Foo" type="Warning" />} />

[milooy]

Good! 👍
Both the Composition Pattern and Slot Pattern can help avoid prop drilling, and their recommended use cases differ:

Composition Pattern is ideal when you need to assemble multiple independent child components in a flexible way.

<Modal>
  <Modal.Header title="Edit Item" />
  <Modal.Content items={items} />
  <Modal.Footer onConfirm={onConfirm} />
</Modal>

Slot Pattern is better suited when the child component is not bound to specific roles and simply renders the provided content in predefined slots.

<Card header={<h1>Title</h1>} body={<p>Content</p>} />

The key is to choose the one that aligns with your component's responsibilities and flexibility requirements :)