HTML ትምህርት - ክፍል 11 | React useEffect, Lists & Conditional

⚡

useEffect — Side Effects // React Hook

useEffect — Component ሲጫን፣ State ሲቀየር ወይም ሲዘጋ አንድ ነገር ለማስሮጥ ይጠቅማል! API call, Timer, Event listener...
useEffect runs code after render — perfect for API calls, timers, and subscriptions.

💡

Syntax: useEffect(() => { /* code */ }, [dependencies])
— [] = አንድ ጊዜ ብቻ (on mount)
— [value] = value ሲቀየር ብቻ
— nothing = ሁሌ render ሲሆን
The dependency array controls when the effect runs.

⏱️ Component Lifecycle:

1. Mount — ሲጫን

Component page ላይ ሲጫን — useEffect(fn, []) ይሰራል
Component first appears on screen

2. Update — ሲቀየር

State ወይም Props ሲቀየር — useEffect(fn, [dep]) ይሰራል
Re-renders when state or props change

3. Unmount — ሲወጣ

Component page ላይ ሲወጣ — cleanup function ይሰራል
Cleanup runs when component is removed

useEffect.jsx

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return; // running ካልሆነ ቁም

    // ሁሉም ሰከንድ +1 ይጨምር
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // Cleanup — interval ያስቁም
    return () => clearInterval(interval);

  }, [running]); // running ሲቀየር ብቻ ይሰራ

  return (
    <div>
      <h2>{seconds}s</h2>
      <button onClick={() => setRunning(!running)}>
        {running ? 'Stop' : 'Start'}
      </button>
    </div>
  );
}

🎮 Demo — Timer (useEffect ምሳሌ):
This uses the same logic as useEffect with setInterval!

00:00

useEffect + setInterval

📋

Lists Rendering — ዝርዝር ማሳየት // .map() in JSX

React ውስጥ Array ን .map() ተጠቅሞ JSX ዝርዝር ማሳየት ይቻላል! ሁሉም item key prop ያስፈልገዋል!
Use .map() to render lists in React. Every item MUST have a unique key prop!

⚠️

key prop ግዴታ ነው! React ዝርዝር ውስጥ ለውጥ ሲሆን ለማወቅ key ይጠቀማል። key unique መሆን አለበት!
key is required! React uses it to track which items changed. Must be unique.

ListRender.jsx

function LessonList() {
  const lessons = [
    { id: 1, title: 'HTML Basics',   done: true  },
    { id: 2, title: 'CSS Flexbox',  done: true  },
    { id: 3, title: 'JavaScript',   done: true  },
    { id: 4, title: 'React Basics', done: false },
  ];

  return (
    <ul>
      {lessons.map(lesson => (
        <li key={lesson.id}>   {/* key ግዴታ! */}
          {lesson.done ? '✅' : '⏳'} {lesson.title}
        </li>
      ))}
    </ul>
  );
}

🎮 Demo — Live List Rendering:
Add items to the array — React renders each with a unique key!

          array.length = 0
        

🔀

Conditional Rendering — ሁኔታዊ ማሳያ // if / && / ternary

React ውስጥ ሁኔታ ሲኖር ልዩ ልዩ UI ማሳየት ይቻላል! if, &&, ternary (?:) ሁሉም ይሰራሉ!
Show different UI based on conditions using if, &&, or the ternary operator!

Conditional.jsx — 3 አይነቶች

function UserStatus({ isLoggedIn, isAdmin, name }) {

  // 1. if statement — ሙሉ block
  if (!isLoggedIn) {
    return <p>እባክዎ Login ያድርጉ</p>;
  }

  return (
    <div>
      {/* 2. Ternary — አጭር if/else */}
      <h2>
        {isAdmin ? '👑 Admin' : '👤 User'}: {name}
      </h2>

      {/* 3. && — ሁኔታ እውነት ከሆነ ብቻ */}
      {isAdmin && (
        <button>🗑️ Delete Users</button>
      )}

      <p>ሰላም! ትምህርት ጀምር</p>
    </div>
  );
}

🎮 Demo — Conditional Rendering: ሁኔታ ቀይር → UI ይቀያየር!
Change the state — watch the UI update conditionally!

📌

ዋና ዋና ነጥቦች // Key Takeaways

1

⚡ useEffect — Side Effects

useEffect(() => { }, [deps]) — API call, Timer, Event listener ለማስሮጥ።
Runs after render. [] = once, [val] = when val changes.

2

🧹 Cleanup Function

useEffect ውስጥ return () => { } ሲጻፍ Component ሲወጣ ይሰራል — Timer, listener ለማቆም።
Return a cleanup function to avoid memory leaks.

3

📋 .map() ለ Lists

Array.map() ተጠቅሞ JSX ዝርዝር ማሳየት — ሁሉም item key prop ያስፈልገዋል!
Use .map() to render lists. key prop is required and must be unique.

4

🔀 Conditional Rendering — 3 አይነቶች

if return | condition && <JSX> | condition ? <A> : <B>
Three ways: early return, && operator, ternary operator.

🎯

Quiz // ምን ተማርን?

❓ React ውስጥ list .map() ሲጠቀሙ ሁሉም item ምን prop ያስፈልጋቸዋል?
What required prop must every item have when rendering lists with .map()?

A id prop

B index prop

C key prop ✅

D name prop

React Level 2 ⚛️useEffect, Lists & Conditional!

1. Mount — ሲጫን

2. Update — ሲቀየር

3. Unmount — ሲወጣ

React Level 2 ⚛️
useEffect, Lists & Conditional!