Jinsi ya Kutumia useEffect Hook kwa Side Effects katika React

Jifunze jinsi ya kutumia useEffect hook katika React kwa ajili ya side effects kama data fetching, subscriptions, timers, au manual DOM updates. useEffect inafanya component yako kuwa reactive na inashughulikia changes za state au props.

Mfano wa Code (Data Fetching):

// src/UsersList.js
import React, { useState, useEffect } from 'react';

function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(data => {
setUsers(data);
setLoading(false);
})
.catch(err => console.error(err));
}, []); // empty dependency array = run once on mount

if (loading) return <p>Loading users...</p>;

return (
<div>
<h2>Users List</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name} - {user.email}</li>
))}
</ul>
</div>
);
}

export default UsersList;


Maelezo ya Code:

useEffect: Hook inayoshughulikia side effects kwenye functional component.

Dependency Array: [] inamaanisha effect itatumika once tu baada ya initial render.

Iwapo una state au prop unayotaka effect ibadilike nayo, ongeza kwenye array: [stateVar].

Side Effects Examples: API calls, event listeners, local storage updates, subscriptions.

Tips za useEffect:

Kila effect inapaswa kuwa focused kwa task moja.

Usibadilike state bila dependency sahihi; inaweza kusababisha infinite loop.

Cleanup function: inatumika ku-remove subscriptions au timers ili kuepuka memory leaks.

useEffect(() => {
const timer = setInterval(() => console.log('Tick'), 1000);
return () => clearInterval(timer); // cleanup on unmount
}, []);


🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509