Scribd
Upload
4 views

Assignment-12

The assignment involves creating a React component called UserList that fetches and displays user data from an API using the useEffect hook. It requires handling loading states, setting up a timer to update the document title, and cleaning up side effects upon component unmounting. Additionally, there is an optional task to implement a search functionality for filtering users by name and to submit relevant files including the main app file, the UserList component, styles, and a README explaining the approach taken.

Uploaded by

angaradevimahi007
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Assignment-12

The assignment involves creating a React component called UserList that fetches and displays user data from an API using the useEffect hook. It requires handling loading states, setting up a timer to update the document title, and cleaning up side effects upon component unmounting. Additionally, there is an optional task to implement a search functionality for filtering users by name and to submit relevant files including the main app file, the UserList component, styles, and a README explaining the approach taken.

Uploaded by

angaradevimahi007
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Assignment: Managing Side Effects with useEffect at LaunchDarkly

Scenario: At LaunchDarkly, you're working on a dashboard that displays a list of active users. The
data for the users is fetched from an API, and you need to handle this using useEffect. In addition,
you need to handle side effects such as setting up timers or event listeners, and cleaning them up
when the component is unmounted.

Your task is to create a component that:

1. Fetches user data from a mock API when the component mounts.

2. Displays a loading state while the data is being fetched.

3. Updates the state with the fetched data and displays it in the UI.

4. Uses useEffect to fetch the data only when the component is first mounted.

Assignment Tasks:

1. Set Up Your React Project:

o If you haven't already, set up your React project using Vite:

npm create vite@latest react-user-dashboard --template react

cd react-user-dashboard

npm install

npm run dev

2. Create a Component for Fetching Data:

o Create a new component called UserList that will:

 Fetch user data from an API endpoint using useEffect.

 Display a loading message until the data is fetched.

 Display the user data once it's successfully loaded.

3. Handle Side Effects (Timers or Event Listeners):

o Add a timer in the UserList component that updates the document's title to show
the number of users fetched every 5 seconds, but make sure to clean it up when the
component unmounts.

o Use useEffect for this side effect and cleanup.

4. Bonus (Optional):

o Add a search functionality to filter the list of users by name. You can create a search
input field and filter the displayed users by their name as the user types.

5. Styling the Component:


o Add basic styling for the user list and the search input field. Make sure the loading
state and error messages are clearly visible and distinct from the content.

Submission:

Submit the following files:

1. src/App.jsx: The main file where you initialize and render the UserList component.

2. src/UserList.jsx: The component that fetches and displays user data using useEffect.

3. src/styles.css: The file containing the styles for the component.

4. README.md: A brief explanation of your approach:

o How did you use useEffect for data fetching?

o How did you handle side effects (such as the timer) with useEffect?

o What challenges did you face and how did you solve them?

Learning Outcomes:

By completing this assignment, you will:

 Learn how to use the useEffect hook to handle side effects such as data fetching and timers.

 Gain experience in managing asynchronous data in React and displaying it dynamically.

 Understand how to clean up side effects when a component unmounts to avoid memory
leaks.

 Improve your skills in managing state and side effects, which are essential for building
interactive and performant applications at LaunchDarkly.

You might also like