Cilat janë rregullat e Hooks? Pse nuk mund ta thirrësh një hook në mënyrë të kushtëzuar?

Question

IT Interview Practice · Accepted Answer

Hooks (`useState`, `useEffect`, etj.) kanë dy rregulla:

1. **Thrreje hooks vetëm në nivelin më të lartë** — kurrë brenda kushteve, luckash ose funksioneve të mbivendosura.
2. **Thrreje hooks vetëm nga funksionet React** — komponentë ose custom hooks të tjerë.

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ conditional hook — breaks React
  }
}
```

## Pse rendi duhet të jetë stabil

React **nuk** identifikon hooks sipas emrit — mbështetet në **rendin e thirrjeve**. Në çdo renderim ai ecet përmes hooks në të njëjtën sekuencë dhe përputhet çdo thërritje me një vend në një listë të brendshme:

```text
Render 1:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
Render 2:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
```

Nëse thërrit një hook në mënyrë të kushtëzuar, rendi mund të ndryshojë ndërmjet renderimeve. Atëherë vendi 1 mund të jetë `useState(B)` në një renderim dhe `useEffect` në tjetrin — React do t'i jepte gjendjen e gabuar hook-ut të gabuar, duke korruptuar gjithçka.

## Si të shkruani saktë logjikën e kushtëzuar

Mbajeni hook-un të pakushtëzuar dhe vendosni kushtimin **brenda** tij, ose degëzojuni vlerën që ai kthen:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // condition INSIDE the effect, not around it
  fetchUser(id).then(setUser);
}, [id]);
```

Rregulla lint `eslint-plugin-react-hooks` zbaton këto rregulla automatikisht.

Pse rendi duhet të jetë stabil

Si të shkruani saktë logjikën e kushtëzuar

Pyetje të ngjashme