Scribd
Upload
3 views5 pages

Lab06 ReactHooks

The document outlines a lab focused on exploring React Hooks, specifically useEffect and useContext. It includes tasks for fetching data in a functional component, managing state with hooks, and creating a context for global state management. Additionally, it discusses implementing effect cleanup and provides code examples for each task.

Uploaded by

amir.raza537918
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views5 pages

Lab06 ReactHooks

The document outlines a lab focused on exploring React Hooks, specifically useEffect and useContext. It includes tasks for fetching data in a functional component, managing state with hooks, and creating a context for global state management. Additionally, it discusses implementing effect cleanup and provides code examples for each task.

Uploaded by

amir.raza537918
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Lab 06 – Exploring React Hooks

Task 1: Exploring useEffect

Objective: Utilize the useEffect hook to manage side effects in a React functional
component.

Task:

1. Set Up the Project: Initialize a new React project using Create React App, Vite, or
any preferred setup. Ensure all necessary dependencies are installed.
2. Create a Component with Local State: Develop a functional component named
UserList. Within this component, use the useState hook to create a state variable
users, initialized as an empty array.
3. Fetch Data Using useEffect: Implement the useEffect hook to fetch user data
from a public API (e.g., JSONPlaceholder) when the component mounts. Update the
users state with the fetched data.
4. Display the Fetched Data: Render the list of users in the component, displaying
relevant information such as name and email.

Solution:

import React, { useState, useEffect } from 'react';

function UserList() {
const [users, setUsers] = useState([]);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((data) => setUsers(data));
}, []);

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

export default UserList;

Task 2: useEffect with dependency array


To fetch data in a React component whenever a specific variable changes, you
can utilize the useEffect hook with that variable included in its dependency array.
This ensures that the effect runs not only on the initial render but also whenever
the specified variable updates.
State Variables:
 query: Stores the current search term entered by the user.
 data: Holds the fetched data corresponding to the search term.
 loading: Indicates whether the data fetching is in progress.
 error: Captures any errors that occur during the fetch operation.
Effect Hook (useEffect):
 The effect is set up to run the fetchData function whenever the query
state changes. This is achieved by including query in the dependency
array.
 Before fetching, the effect checks if query is non-empty to prevent
unnecessary operations.
 The fetchData function is defined as an asynchronous function within the
effect. It sets loading to true, performs the fetch operation, updates the
data state with the fetched results, and handles any errors by updating the
error state. Finally, it sets loading to false after the operation completes.
User Interface:
 An input field allows the user to enter a search term, which updates the
query state.
 Conditional rendering is used to display loading and error messages based
on the loading and error states.
 The fetched data is displayed as a list of items.

import React, { useState, useEffect } from 'react';

function DataFetcher() {
const [query, setQuery] = useState('react');
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
if (!query) return;

const fetchData = async () => {


setLoading(true);
try {
const response = await fetch(`https://api.example.com/search?q=$
{query}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
setData(result.items);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};

fetchData();
}, [query]); // Dependency array includes 'query'

return (
<div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Enter search term"
/>
{loading && <p>Loading...</p>}
{error && <p>Error: {error}</p>}
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}

export default DataFetcher;

Task 2: Implementing useContext

Objective: Use the useContext hook to manage and consume global state across multiple
components.

Task:

1. Create a Context: Define a context named ThemeContext with a default value of


'light'.
2. Set Up a Context Provider: Develop a component ThemeProvider that uses the
ThemeContext.Provider to pass down the current theme and a function to toggle the
theme between 'light' and 'dark'.
3. Consume the Context in a Child Component: Create a component ThemedButton
that consumes the ThemeContext to apply styles based on the current theme.
4. Integrate Components: Use the ThemeProvider to wrap the application or a part of
it, and include the ThemedButton within this context.

Solution:

jsx
CopyEdit
import React, { useState, useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeProvider({ children }) {


const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}

function ThemedButton() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button
style={{
backgroundColor: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#000' : '#fff',
}}
onClick={toggleTheme}
>
Toggle Theme
</button>
);
}

function App() {
return (
<ThemeProvider>
<ThemedButton />
</ThemeProvider>
);
}

export default App;

Task 4: Explore effect cleanup

You might also like