@nicodes-dev
Posted
Hi Daniel! You've done a great job on this challenge. Only thing I think that is missing is the opacity when the link is unavailable, overall it looks great.
// In your App.tsx
const [searchData, setSearchData] = useState<DefaultData>(defaultData)
useEffect(() => {
setSearchData(defaultData)
}, [])
You already set the default value of searchData to defaultData so I don't think the useEffect is still needed. But you can improve this by passing your fetch function to search for the default user inside useEffect.
// In App.tsx
useEffect(() => {
const asyncFn = async = () => {
await handleSubmit('octocat')
}
asyncFn()
},[handleSubmit]
But if you pass your handleSubmit function inside useEffect, you need to memoize it by wrapping it in a useCallback hook because it will cause an infinite loop inside the useEffect.
// In useSearchSubmit hook
const handleSubmit = useCallback (async() => {
// all your codes
} ,[])
I haven't learn typescript yet but I hope this is still helpful.
@DanoBroz
Posted
@baldmannnnn Thanks for reaching out and giving the time to review my code 😊.
- There already was opacity class based on empty link, I've made sure to make it more clear
- Sometimes looking too much into code makes you forget redundant setters, thanks for the point.
- I'm not really sure what you ment by using the async function with useCallback. If you'll have some time for spare, please send me DM on Slack.