God component

Labai daug atsakomybės turi komponentas. Visas (visas kodas viename APP.tsx) arba per daug kodo viename faile. Reikia stantis kad faile butu iki 100 eilučių. Jeigu jau 100-200 eilučių kodo, jau reikia galvoti apie mažinimą. Vienas komponentas, viena atsakomybė. Viena priežąstis keisti.

God component (kai visas kodas viename faile):

App.module.css
App.tsx
index.css
main.tsx

God component (kai viename faile daug atsakomybių, komponentas atsako uz modulio valdyma, formos kontrole, filtrus ir task):

const App = () => {
  const [tracks, setTracks] = useState<Track[]>([]); 
  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
  const [hideWeekends, setHideWeekends] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCell, setSelectedCell] = useState<{ day: number; task: string} | null>(null);
  const [selected Track, setSelectedTrack] = useState<Track | null>(null);
  const [formData, setFormData] = useState({
    name: '',
    task: '',
    hours: 0,
    date: new Date().toISOString().split('T')[0] });

Minusai:

• neaiškus kodas. Milerio krepsis, žmogus galvoje gali tureti 5 - 7 abstrakcijų vienų metu. Norint suprasti, kaip veikia, reikia VISKĄ suprasti.
• neimanoma kodo perpanaudoti

Sprendimas

Išskaidyti kodą į atskirus komponentus