Functional komponent va Hooks

DarslarWeb dasturlash

Functional komponent va Hooks

Zamonaviy React — functional komponentlar va hooks: useState, useEffect, useRef. Class'siz ham hammasi bo'ladi.

70 daqiqa
React — Dars 10

Hooks — zamonaviy React

Class'siz state, lifecycle va ref. 2019-yildan beri — React'ning kelajagi.

useStateuseEffectuseRefcustom hook

Dars rejasi

6 ta mavzu
  1. 01Functional vs Class — nima uchun?
  2. 02useState
  3. 03useEffect
  4. 04useRef
  5. 05Qoidalar va custom hooks
  6. 06Mashhur hooks — umumiy ko'rinish

1. Functional vs Class

Bir xil natija — 2 xil uslub
1// ========== CLASS (eski) ==========
2class Hisoblagich extends Component {
3  state = { son: 0 };
4

5  oshir = () => this.setState({ son: this.state.son + 1 });
6

7  render() {
8    return (
9      <div>
10        <h1>{this.state.son}</h1>
11        <button onClick={this.oshir}>+</button>
12      </div>
13    );
14  }
15}
16

17// ========== FUNCTIONAL + HOOKS (zamonaviy) ==========
18function Hisoblagich() {
19  const [son, setSon] = useState(0);
20

21  return (
22    <div>
23      <h1>{son}</h1>
24      <button onClick={() => setSon(son + 1)}>+</button>
25    </div>
26  );
27}

Qisqa

Ikki barobar kam kod. This yo'q.

Tez

React tezroq optimallashtiradi, bundle kichikroq.

Custom hook

O'z logikangizni qayta ishlatishga osonroq.

2. useState

useState — komponentga «xotira» qo'shadi. Massiv qaytaradi: [qiymat, qiymatniO'zgartiruvchiFunksiya].

1import { useState } from "react";
2

3function Misol() {
4  // Oddiy qiymatlar
5  const [son, setSon] = useState(0);
6  const [ism, setIsm] = useState("");
7  const [faol, setFaol] = useState(true);
8

9  // Obyekt
10  const [user, setUser] = useState({ ism: "Ali", yosh: 17 });
11

12  // Massiv
13  const [royxat, setRoyxat] = useState([]);
14

15  const oshir = () => setSon(son + 1);
16  const oshir2 = () => setSon(oldin => oldin + 1);  // tavsiya
17

18  // Obyektni yangilash — albatta spread!
19  const yangilash = () => {
20    setUser({ ...user, yosh: user.yosh + 1 });
21  };
22

23  // Massivga qo'shish
24  const qoshish = (yangi) => {
25    setRoyxat([...royxat, yangi]);
26  };
27

28  return <div>{son}</div>;
29}

3. useEffect

useEffect — komponent chizilgandan keyin qandaydir ish qilish uchun. Class'dagi componentDidMount + componentDidUpdate + componentWillUnmount birga.

3 ta variant
1import { useEffect, useState } from "react";
2

3function Misol() {
4  const [son, setSon] = useState(0);
5  const [data, setData] = useState(null);
6

7  // 1) Har render'da — kam ishlatiladi
8  useEffect(() => {
9    console.log("Har render");
10  });
11

12  // 2) Faqat bir marta (mount'da) — componentDidMount'ga o'xshash
13  useEffect(() => {
14    console.log("Faqat birinchi marta");
15    fetch("/api/user").then(r => r.json()).then(setData);
16  }, []);  // bo'sh massiv
17

18  // 3) son o'zgarganda — componentDidUpdate ga o'xshash
19  useEffect(() => {
20    console.log("Son o'zgardi:", son);
21    document.title = `Son: ${son}`;
22  }, [son]);
23

24  return <button onClick={() => setSon(son + 1)}>{son}</button>;
25}
Cleanup — componentWillUnmount
1function Soat() {
2  const [vaqt, setVaqt] = useState(new Date());
3

4  useEffect(() => {
5    const timer = setInterval(() => {
6      setVaqt(new Date());
7    }, 1000);
8

9    // Cleanup — komponent o'chganda yoki effect qayta ishga tushganda
10    return () => clearInterval(timer);
11  }, []);
12

13  return <h1>{vaqt.toLocaleTimeString()}</h1>;
14}

Dependency yo'q

useEffect(fn) — har render'da. Xatarli.

Bo'sh []

useEffect(fn, []) — bir marta, mount'da.

Dependency

useEffect(fn, [x, y]) — x yoki y o'zgarganda.

4. useRef

1) DOM element'ga murojaat
1import { useRef, useEffect } from "react";
2

3function AvtoFocus() {
4  const inputRef = useRef(null);
5

6  useEffect(() => {
7    inputRef.current.focus();
8  }, []);
9

10  return <input ref={inputRef} placeholder="Avto-focus" />;
11}
2) Render'siz qiymat saqlash
1function RenderHisoblagich() {
2  const [son, setSon] = useState(0);
3  const renderSoni = useRef(0);
4

5  // .current++ — state emas, render chaqirmaydi
6  renderSoni.current++;
7

8  return (
9    <div>
10      <p>Son: {son}</p>
11      <p>Render: {renderSoni.current} marta</p>
12      <button onClick={() => setSon(son + 1)}>Oshir</button>
13    </div>
14  );
15}

5. Qoidalar va custom hooks

❌ Xato va ✅ To'g'ri
1// ❌ IF ichida
2function Xato({ faol }) {
3  if (faol) {
4    const [x, setX] = useState(0);   // XATO
5  }
6}
7

8// ✅ useState oldin, keyin if
9function Togri({ faol }) {
10  const [x, setX] = useState(0);
11  if (faol) {
12    return <div>{x}</div>;
13  }
14  return null;
15}

Custom hook — o'z logikangizni «use» prefiksi bilan funksiyaga chiqarish. Qayta ishlatish uchun.

useLocalStorage — custom hook
1import { useState, useEffect } from "react";
2

3function useLocalStorage(kalit, defaultQiymat) {
4  const [value, setValue] = useState(() => {
5    const saved = localStorage.getItem(kalit);
6    return saved ? JSON.parse(saved) : defaultQiymat;
7  });
8

9  useEffect(() => {
10    localStorage.setItem(kalit, JSON.stringify(value));
11  }, [kalit, value]);
12

13  return [value, setValue];
14}
15

16// Ishlatish — useState kabi!
17function App() {
18  const [ism, setIsm] = useLocalStorage("ism", "");
19  const [mavzu, setMavzu] = useLocalStorage("mavzu", "light");
20

21  return <input value={ism} onChange={e => setIsm(e.target.value)} />;
22}

6. Mashhur hooks — umumiy ko'rinish

useContext

Context'dan qiymat olish — prop-drilling'siz.

useReducer

Murakkab state'lar uchun useState'ga muqobil.

useMemo

Og'ir hisoblashlarni keshash.

useCallback

Funksiyani barqaror qilish (optimallashtirish).

useLayoutEffect

useEffect'ga o'xshash, lekin sinxron.

useId

Unique id yaratish (accessibility uchun).

Todo app — endi Hooks bilan (Dars 9 ning zamonaviy versiyasi)
1import { useState, useEffect } from "react";
2

3function TodoApp() {
4  const [vazifalar, setVazifalar] = useState([]);
5  const [filtr, setFiltr] = useState("all");
6  const [matn, setMatn] = useState("");
7

8  // Yuklash
9  useEffect(() => {
10    const saved = localStorage.getItem("vazifalar");
11    if (saved) setVazifalar(JSON.parse(saved));
12  }, []);
13

14  // Saqlash
15  useEffect(() => {
16    localStorage.setItem("vazifalar", JSON.stringify(vazifalar));
17  }, [vazifalar]);
18

19  const qoshish = (e) => {
20    e.preventDefault();
21    if (!matn.trim()) return;
22    setVazifalar([...vazifalar, {
23      id: Date.now(),
24      matn: matn.trim(),
25      bajarildi: false
26    }]);
27    setMatn("");
28  };
29

30  const toggle = (id) => {
31    setVazifalar(vazifalar.map(v =>
32      v.id === id ? { ...v, bajarildi: !v.bajarildi } : v
33    ));
34  };
35

36  const ochir = (id) => {
37    setVazifalar(vazifalar.filter(v => v.id !== id));
38  };
39

40  const korinadigan = vazifalar.filter(v => {
41    if (filtr === "active") return !v.bajarildi;
42    if (filtr === "done") return v.bajarildi;
43    return true;
44  });
45

46  return (
47    <div className="app">
48      <h1>Vazifalar</h1>
49      <form onSubmit={qoshish}>
50        <input value={matn} onChange={e => setMatn(e.target.value)} />
51        <button>Qo'sh</button>
52      </form>
53

54      <div className="filter">
55        {["all", "active", "done"].map(f => (
56          <button
57            key={f}
58            className={filtr === f ? "on" : ""}
59            onClick={() => setFiltr(f)}
60          >
61            {f}
62          </button>
63        ))}
64      </div>
65

66      <ul>
67        {korinadigan.map(v => (
68          <li key={v.id} className={v.bajarildi ? "done" : ""}>
69            <input type="checkbox" checked={v.bajarildi}
70                   onChange={() => toggle(v.id)} />
71            <span>{v.matn}</span>
72            <button onClick={() => ochir(v.id)}>×</button>
73          </li>
74        ))}
75      </ul>
76    </div>
77  );
78}
Hooks bilan mini-demo
Natijajonli

Kichik test

0 / 5

1.useState nima qaytaradi?

2.useEffect faqat bir marta ishlashi uchun?

3.Timer tozalash qayerda?

4.Hooks qayerda chaqiriladi?

5.useRef va useState farqi?

Mustaqil ish

0 / 6