🖼️ See the drawing + lab 🏠 Course home 🌿 Branch on GitHub ✏️ View source

🖼️ आकृती आणि labThe drawing + lab पूर्ण पानावर उघडा ↗Open full page ↗

🧠 धडा 05 — State आणि components: सत्याचा एकच स्रोत

📍 तुम्ही इथे आहात: 12 पैकी धडा 05 · मागे: lesson-04-javascript-events · पुढे: lesson-06-accessibility

📦 या ब्रँचमध्ये काय आहे

धडे 01–04, आणि ती कल्पना जी automate करण्यासाठीच प्रत्येक framework अस्तित्वात आहे: state (मुख्य यादी), components (data पासून DOM बनवणारी functions), आणि एकच नियम — UI = render(state).

🧒 5 वर्षांच्या मुलाला समजावल्यासारखे

हा आहे सापळा. फलकावर पाच विद्यार्थी दिसतात. एका नवीन विद्यार्थ्याचे नाव नोंदवले जाते, म्हणून तुम्ही एक card जोडता. पण footer म्हणते "5 students on the board" — तेही बदला. आणि filter 3B वर आहे, म्हणून कदाचित ते card दिसायलाच नको. आणि रिकाम्या यादीचा संदेश अजून लपलेलाच आहे… आता तीन ठिकाणांना सत्याचा एक-एक तुकडा माहीत आहे, आणि पुढच्या आठवड्यात त्यांच्यापैकी एक असहमत असेल.

यावर उपाय म्हणजे एकाच object मध्ये ठेवलेली मुख्य यादी 🧠:

const state = { students: [], filter: "", loading: true, error: null };

इतर काहीही काहीच लक्षात ठेवत नाही. काहीतरी घडले की तुम्ही state बदलता आणि एकच function बोलवता — render() — जे सध्याच्या state वरून संपूर्ण फलक काढते: cards, status ओळ, संख्या. फलक कधीच स्वतःशी असहमत होऊ शकत नाही, कारण सत्याचा स्रोत एकच आहे.

आणि काढण्याचे काम components 🧩 मध्ये विभागलेले आहे — छोटी functions जी data चा एक तुकडा DOM च्या एका तुकड्यात बदलतात: StudentCard(s) एक विद्यार्थी घेते आणि एक card परत देते. तेच input, तेच output, कोणतेही आश्चर्य नाही.

UI = render(state). हे एका sticky note वर लिहून ठेवा. Lesson 07 मधला प्रत्येक framework नेमके हेच करण्याचा एक हुशार, जलद मार्ग आहे.

🗺️ आकृती

flowchart LR
    ev["👆 event"] --> st["🧠 state = {students, filter, loading, error}<br/>the ONLY source of truth"]
    st --> r["🔁 render(state)"]
    r --> c1["🧩 StudentCard(s) → card"]
    r --> c2["🧩 status line"]
    r --> c3["🧩 count in the footer"]
    c1 & c2 & c3 --> dom["📄 the DOM"]
    note["never edit the DOM outside render()"]

❓ काय

State: फलकाने आत्ता काय दाखवायला हवे ते सांगणारा साधा data — server data (students), UI state (filter), request state (loading, error). बाकी सगळे (filter केलेली list, संख्या) render() च्या आत काढा.
Components: function StudentCard(student) → Element. शुद्ध: कोणतेही fetching नाही, global state नाही, side effects नाहीत. Test करायला सोपे (lesson 10).
नियम: handlers state बदलतात, मग render() बोलवतात. इतर काहीही DOM मध्ये लिहीत नाही. आपले render() संपूर्ण list एकदम बदलण्यासाठी replaceChildren(...) वापरते.
काढलेली state म्हणजे state नव्हे: filteredStudents साठवू नका — ते गणना करून काढा. एकाच सत्याच्या दोन प्रती नेहमी एकमेकांपासून दूर जातात.
Performance: छोटी list पुन्हा बांधणे स्वस्त असते. तसे नसेल, तर तुम्ही एकतर key देऊन diff करता (React हेच करतो) किंवा नेमका भागच बदलता — पण फक्त मोजमाप केल्यानंतर (lesson 09).
थोडी UI state (theme) टिकवून ठेवायची असेल तर localStorage चालते — try/catch मध्ये गुंडाळून, कारण private browsing मध्ये ते throw करू शकते.

🤔 का

कारण "काउंटर 5 म्हणाला पण मला 6 दिसतात" हा UI bugs चा सर्वात सामान्य प्रकार आहे, आणि तो एकच गोष्ट एकापेक्षा जास्त ठिकाणी लक्षात ठेवल्यामुळे होतो. हा एकच नियम तो संपूर्ण प्रकारच काढून टाकतो — आणि पुढच्या धड्यात React, Vue किंवा Svelte मध्ये तुम्ही नेमके हेच मानसिक चित्र घेऊन जाल.

🔧 कसे (या repo मध्ये)

ui/app.js चे भाग 1 आणि 2: सर्वात वर state, त्याखाली StudentCard(s) आणि render(). लक्षात घ्या की कोणती cards काढायची हे ठरवण्यासाठी render() state.filter वाचते आणि status मजकूर व footer मधली संख्या लिहिते — तीन दृश्ये, एकच सत्य.

🧪 करून पाहा

python3 ui/mock_api.py
# 1) prove the rule holds: enrol a student while the filter is on 3A — the count updates, the card appears only if it matches
# 2) break it on purpose: in the submit handler, replace `state.students.push(s); render();`
#    with `document.querySelector('#student-list').appendChild(StudentCard(s));`
#    then change the filter — your student vanishes, and the footer count is wrong. That is the bug this lesson kills.
# 3) put it back, then add real state: a `sort` field ('name' | 'grade'), a <select> that sets it, and one line in render()
# 4) in the Console:  state   (it is inside the IIFE — so expose it temporarily with window.state = state to inspect)

✅ तपासा — तुम्हाला काय दिसायला हवे

नियम पाळल्यावर: state मधला प्रत्येक बदल एकसंध फलक पुन्हा रंगवतो. हाताने बदल केल्यावर: card DOM मध्ये असते पण state मध्ये नसते, म्हणून पुढचे render() ते पुसून टाकते आणि संख्या कधीच बरोबर नव्हती. तुमच्या नवीन sort control ला render() मध्ये नेमकी एक ओळ लागते, आणि इतर कोणताही बदल लागत नाही.

🏁 तुम्ही आत्ताच काय सिद्ध केले

एका object ने सत्य धरून ठेवले, एका function ने ते काढले, आणि नवीन feature जोडणे म्हणजे state आणि render() बदलणे — संख्या दाखवणारी प्रत्येक जागा शोधत बसणे नव्हे.

⚠️ नेहमीच्या चुका

render() च्या बाहेर DOM बदलणे (तुम्ही आत्ताच मुद्दाम तयार केलेला bug)
काढलेला data (filteredStudents, count) state मध्ये साठवणे
प्रत्येक keystroke ला जड गोष्टी पुन्हा बांधणारे एकच प्रचंड render() — components वेगळे करा, किंवा input debounce करा
अनेक files मध्ये विखुरलेल्या globals मध्ये state ठेवणे
हा नियम का अस्तित्वात आहे ते अनुभवण्याआधीच framework कडे धाव घेणे

🏭 प्रत्यक्ष वापरात हे का महत्त्वाचे: React चे useState, Vue चे ref आणि Svelte चे $state म्हणजे diffing engine जोडलेला हाच धडा. ज्या teams ना हे समजते त्या frameworks debug करतात; ज्यांना समजत नाही त्या frameworks शी भांडत बसतात.

⏭️ पुढे

फलक एकसंध आहे — पण प्रत्येकजण तो वापरू शकतो का? Accessibility: keyboard, labels, contrast, focus आणि घोषणा.

git checkout lesson-06-accessibility

🧠 Lesson 05 — State & components: one source of truth

📍 You are here: Lesson 05 of 12 · Previous: lesson-04-javascript-events · Next: lesson-06-accessibility

📦 What's in this branch

Lessons 01–04, plus the idea every framework exists to automate: state (the master list), components (functions from data to DOM), and the one rule — UI = render(state).

🧒 Explain like I'm 5

Here is the trap. The board shows five students. A new one is enrolled, so you append a card. But the footer says "5 students on the board" — update that too. And the filter is on 3B, so maybe the card should not show at all. And the empty-state message is still hidden… Three places now know a piece of the truth, and next week one of them will disagree.

The cure is a master list 🧠 kept in one object:

const state = { students: [], filter: "", loading: true, error: null };

Nothing else remembers anything. When something happens you change state and call one function — render() — which draws the whole board from the current state: the cards, the status line, the count. The board can never disagree with itself, because there is only one source of truth.

And the drawing is split into components 🧩 — small functions that turn one piece of data into one piece of DOM: StudentCard(s) takes a student and returns a card. Same input, same output, no surprises.

UI = render(state). Write it on a sticky note. Every framework in lesson 07 is a clever, fast way of doing exactly this.

🗺️ Diagram

flowchart LR
    ev["👆 event"] --> st["🧠 state = {students, filter, loading, error}<br/>the ONLY source of truth"]
    st --> r["🔁 render(state)"]
    r --> c1["🧩 StudentCard(s) → card"]
    r --> c2["🧩 status line"]
    r --> c3["🧩 count in the footer"]
    c1 & c2 & c3 --> dom["📄 the DOM"]
    note["never edit the DOM outside render()"]

❓ What

State: plain data describing what the board should show right now — server data (students), UI state (filter), request state (loading, error). Derive everything else (the filtered list, the count) inside render().
Components: function StudentCard(student) → Element. Pure: no fetching, no global state, no side effects. Easy to test (lesson 10).
The rule: handlers change state, then call render(). Nothing else writes to the DOM. Our render() uses replaceChildren(...) to swap the whole list at once.
Derived state is not state: do not store filteredStudents — compute it. Two copies of one truth always drift.
Performance: rebuilding a small list is cheap. When it is not, you either key and diff (what React does) or update surgically — but only after measuring (lesson 09).
Persisting a little UI state (the theme) is fine in localStorage — wrapped in try/catch, because private browsing can throw.

🤔 Why

Because "the counter said 5 but I see 6" is the most common class of UI bug, and it is caused by more than one thing remembering the same fact. This one rule removes the whole category — and it is the exact mental model you will carry into React, Vue or Svelte next lesson.

🔧 How (in this repo)

ui/app.js sections 1 and 2: state at the top, StudentCard(s) and render() below it. Notice render() reads state.filter to decide which cards to draw and writes the status text and the footer count — three views, one truth.

🧪 Try it

python3 ui/mock_api.py
# 1) prove the rule holds: enrol a student while the filter is on 3A — the count updates, the card appears only if it matches
# 2) break it on purpose: in the submit handler, replace `state.students.push(s); render();`
#    with `document.querySelector('#student-list').appendChild(StudentCard(s));`
#    then change the filter — your student vanishes, and the footer count is wrong. That is the bug this lesson kills.
# 3) put it back, then add real state: a `sort` field ('name' | 'grade'), a <select> that sets it, and one line in render()
# 4) in the Console:  state   (it is inside the IIFE — so expose it temporarily with window.state = state to inspect)

✅ Verify — what you should see

With the rule: every change to state repaints a consistent board. With the hand-edit: the card exists in the DOM but not in state, so the next render() erases it and the count was never right. Your new sort control needs exactly one line in render() and no other changes.

🏁 What you just proved

One object held the truth, one function drew it, and adding a feature meant touching state and render() — not hunting for every place that shows a number.

⚠️ Common mistakes

editing the DOM outside render() (the bug you just created on purpose)
storing derived data (filteredStudents, count) in state
one giant render() that rebuilds heavy things every keystroke — split components, or debounce input
keeping state in globals scattered across files
reaching for a framework before you have felt why this rule exists

🏭 Why this matters in production: React's useState, Vue's ref and Svelte's $state are this lesson with a diffing engine attached. Teams that understand it debug frameworks; teams that do not fight them.

⏭️ Next

The board is consistent — but can everyone use it? Accessibility: keyboard, labels, contrast, focus and announcements.

git checkout lesson-06-accessibility

← Previousjavascript events Next →accessibility

This page is the lesson's README from the lesson-05-state-components branch, shown here so the whole School stays on one site. Code files open on GitHub at the same branch.