training-4-khang #71
training-4-khang #71
Conversation
Training4/src/task-1/src/App.tsx
Outdated
| dispatch({type: 'ERROR', data: err}) | ||
| }) | ||
| } | ||
| const throttleApiCall = useCallback(throttle(fetchJokes, 5000),[]) |
There was a problem hiding this comment.
fetchJokes is created new every render time, so you don't put it as dependencies of useCallback, which means the throttle function always applies for the first func created?
There was a problem hiding this comment.
btw, throttle or debounce function should not apply for the function can be created many times
Training4/src/task-2/src/App.tsx
Outdated
| searchCountry(e.target.value); | ||
| } | ||
|
|
||
| const searchCountry = useCallback(debounce(fetchCountry, 1000),[]) |
There was a problem hiding this comment.
handleSearch call to latest searchCountry created, but the debounce function only apply for 1st fetchCountry created
|
@vanbui1995 I have already update your reviews. Could you check it? |
Training4/src/task-1/src/App.tsx
Outdated
| }) | ||
| } | ||
|
|
||
| const handleGetMore = throttle(() => { |
There was a problem hiding this comment.
still wrong, the arrow function will be created new for every render, handleGetMore function also created new
There was a problem hiding this comment.
we need to memorize the fetchJokes first, should not let create every time we got render -> hint: use callback dependencies [setLoading, dispatch] -> it will be same [], because setLoading & dispatch are not changed at anytime
then memorize the handleGetMore
Training4/src/task-2/src/App.tsx
Outdated
| } | ||
| }, [search]) | ||
|
|
||
| const handleSetSearch = debounce((keyword: string) => { |
No description provided.