Last active
November 24, 2023 09:47
-
-
Save anshu-byte/b957c9710726bd9500f856299ed778a0 to your computer and use it in GitHub Desktop.
useMemo, useCallback, useState, and useEffect combined Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import './App.css'; | |
| import React, { useState, useEffect, useMemo, useCallback } from 'react'; | |
| // const data = [ | |
| // { userId: 1, id: 1, title: 'delectus aut autem', completed: false }, | |
| // { userId: 1, id: 3, title: 'fugiat veniam minus', completed: false }, | |
| // { userId: 1, id: 4, title: 'et porro tempora', completed: true }, | |
| // ]; | |
| // Helper function to fetch data from the API | |
| const fetchData = async () => { | |
| console.log('fetchData'); | |
| const response = await fetch('https://jsonplaceholder.typicode.com/todos'); | |
| const data = await response.json(); | |
| return data; | |
| }; | |
| const App = () => { | |
| // State to hold the fetched data | |
| const [data, setData] = useState([]); | |
| // State to track whether data is currently being loaded | |
| const [loading, setLoading] = useState(true); | |
| console.log('re-rendering'); | |
| // Function to fetch data and update the state | |
| const fetchDataAndSetData = useCallback(async () => { | |
| console.log('fetchDataAndSetData'); | |
| try { | |
| const newData = await fetchData(); | |
| setData(newData); | |
| } catch (error) { | |
| console.error('Error fetching data:', error); | |
| } finally { | |
| setLoading(false); | |
| } | |
| }, []); | |
| // useEffect to fetch data when the component mounts | |
| useEffect(() => { | |
| console.log('useEffect'); | |
| fetchDataAndSetData(); | |
| }, [fetchDataAndSetData]); | |
| // useMemo to memoize the mapped data for better performance | |
| const memoizedMappedData = useMemo(() => { | |
| console.log('memoizedMappedData'); | |
| return data.map((item) => <li key={item.id}>{item.title}</li>); | |
| }, [data]); | |
| return ( | |
| <div> | |
| <h1>Data List</h1> | |
| {loading ? <p>Loading...</p> : <ul>{memoizedMappedData}</ul>} | |
| <button onClick={fetchDataAndSetData}>Reload Data</button> | |
| </div> | |
| ); | |
| }; | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ReactDOM from 'react-dom/client'; | |
| import './index.css'; | |
| import App from './App'; | |
| import reportWebVitals from './reportWebVitals'; | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render( | |
| // <React.StrictMode> | |
| <App /> | |
| // </React.StrictMode> | |
| ); | |
| reportWebVitals(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| You are tasked with creating a React component that fetches data from an API and | |
| displays it in a list. The component should be optimized for performance by using | |
| useMemo, useCallback, useState, and useEffect hooks where appropriate. | |
| Additionally, the component should have a button that allows the user to | |
| reload the data. | |
| Requirements: | |
| - Fetch data from an API (you can use a placeholder API like JSONPlaceholder). | |
| - Display the fetched data in a list. | |
| - Implement a button that allows the user to reload the data. | |
| - Optimize the component's performance using useMemo, useCallback, useState, and | |
| useEffect hooks. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment