接續前一天的單一功能原則，我們重構了 fetchUser 變成一個 customer hook ， useFetchAPI，那我們現在來引入看看，也接著來重構剩下的部分。

• fetchUser 取資料 ✅
• updataUserData
• updateUserError
• popup 呈現
• 資料呈現

// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(userData).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					{userError && <div>{userError}</div>}
       </div>)

}

export default Profile;

在我們引用完 useFetchAPI 後，我們可以發現，是不是 fetch api 的事情只要交給 useFetchAPI，另外 updataUserData 和 updateUserError 的管理因為封裝在 useFetchAPI 裡，所以這兩個部分也同時在 useFetchAPI 去維持他們的功能。所以 updataUserData 和 updateUserError 也重構完畢。

另外針對 popup 的部分，我們可以把它封裝成一個叫 PopUp component，這樣不論傳入任何資料都適用，並且可以控制他開關。

// Popup component

const Popup = (isOpen,message)=>{
	return isOpen? <div>{message}</div> :null;
}

export default Popup;

// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';
import Popup from './Popup';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(userData).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					<Popup isOpen={!!error} message={error} />
       </div>
	)

}

export default Profile;

另外資料的部分也可以直接用 useFetchAPI 得到的 data 來呈現。

// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';
import Popup from './Popup';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(data).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					<Popup isOpen={!!error} message={error} />
       </div>
	)

}

export default Profile;

這樣重構完事不是很簡潔，也很方便找錯誤。