Props drilling

Per komponentą ir hook praeina daugybė props, kurie nereikalingi pačiam komponentui

const App = () => {
  const {
    selectedMonth,
    setSelectedMonth,
    selectedYear,
    setSelectedYear,
    hideWeekends,
    setHideWeekends,
    tableContainerRef,
    currentDayRef,
    getVisibleDays,
    getWeekday, months,
} = useCalendar();

const {
  getUniqueTasks, getDayTotal, getDayTracks,
  getMonthTotal,
  getTaskTotal,
  handleDeleteTrack,
  submitTrack
} = useTracks (selectedMonth, selectedYear);

Ir paskui jie perduodami kitam komponentui.

[] > name > [] > name > [ name ]

Minusai

• Kodas suprantamesnis
• Daug šabloninio kodo (import, props)
• Vis dar sunku suprasti kodą
• Suprasti kaip viskas veikia tapo dar sunkiau

Dekomponentizacija sąlogija daug meta informacijos/duomenų, aprašant interfeisus

interface TableProps {
  tableContainerRef: React.RefObject<HTMLDivElement>;
  currentDayRef: React. RefObject<HTMLTableCellElement>; getVisibleDays: () => number[];
  getWeekday: (day: number) => string;
  selectedMonth: number;
  selectedYear: number;
  getUniqueTasks: () => string[];
  getDayTracks: (day: number, task: string) => Track []; handleCellClick: (day: number, task; string) => void; handleUpdate Track: (track: Track) => void; handleDeleteTrack: (trackId: string) => void;
  getTaskTotal: (task: string) => number;
  getDayTotal: (day: number) => number;
  getMonthTotal: () => number;

Komponentu nePERpanaudojimas. Komponento nepanaudosi be vidiniu komponentų.

<div className={styles.tableContainer) ref={tablec...} >
  <table className={styles.table}>
    <TableHead
      getVisibleDays={getVisibleDays} getWeekday={getWeekday}
      currentDayRef={currentDayRef}
      selectedMonth={selectedMonth}
      selectedYear={selectedYear}
    />
    <tbody>
    {getUniqueTasks().map(task => (
      <TableRow
        key={task} task={task}
        getVisibleDays={getVisibleDays} getDayTracks={getDayTracks}
        handleCellClick={handleCellClick}
        handleUpdateTrack={handleUpdateTrack} handleDeleteTrack={handleDelete Track}
        getTaskTotal={getTaskTotal}
      />
    ))}
    <TableSummaryRow

Sprendimas

• Redux panaudojimas. Tiesiai pasiimti gali iš redus nereikia perdavineti
• naudoti pattern slot ir mediator