How can I use custom method in UseEffect?

Question

How can I use custom method in useEffect?? If I create many components and they use same fetch function, Shoud I declare fetch function in every component's effect?? The function does same work??

As far as I know, If I want to use component's state in useEffect, I should declare and call that function in useEffect likes example 1.

But I want to declare the function other js file. Because it was called other components.

According to Dan Abramov (https://overreacted.io/a-complete-guide-to-useeffect/), If I want to move function, I must use useCallback method. But I didn't understand well. Please give me any advice this issue.

1. Component.js const Component = () => { const [id,setId] = useState(0); const dispatch = useDispatch(); useEffect(() => { fetch(`url/${id}`).then(res => dispatch({type: success, payload: res})) },[id]) } 2. Component.js const Component = () => { const [id, setId] = useState(0); useEffect(()=> { callApi(id) },[id]) } Api.js const callApi = (id) => { const dispatch = useDispatch(); return fetch(`url/${id}`).then(res => dispatch({type:success, payload:res}) }

Joseph D. · Accepted Answer · 2019-10-29 06:51:35Z

Shoud I declare fetch function in every component's effect?

Extract a custom hook, useFetch(), with the same fetch functionality.

// custom hook const useFetch = (id) => { const [data, setData] = useState(null); useEffect( () => { async function fetchData() { const res = await fetch(`url/${id}) setData(res); } fetchData(); }, [id] // id as dependency ) return data; } // sample component using custom hook const Component = (props) => { const dispatch = useDispatch(); const data = useFetch(props.id); // use custom hook useEffect( () => { if (data) { dispatch({type: success, payload: data}); } }, [data] // dispatch every time data changes ) }

Thanks! I didn't think creating cumtom hook. But I have a question When the Component give parameter(id) to useFetch and the id is component's state, How to re-run useFetch if id is changed? Shouldn't useFetch be in useEffect?? Like this : useEffect(()=>useFetch(id),[id]) ?? Is it OK because saved on data and useEffect deps has data??
See rules of hooks. useFetch uses useEffect which has id as dependency. So the fetch will re-run every time id changes then return the new data. If not, it will just return the old data.

Shubham Khatri · Accepted Answer · 2019-10-29 06:08:59Z

Since multiple of your components perform the same action within useEffect, you can extract out the code into a custom hook and use it in all the components

useFetch.js

export const useFetch = () => { const dispatch = useDispatch(); useEffect(() => { fetch(`url/${id}).then(res => dispatch({type: success, payload: res})) },[id]) }

Now in the component you can write

const Component = () => { const [id, setId] = useState(0); useFetch(id); }

Thank for your answer. But I have a question. If id will be changed by any events, Should I move useFetch in useEffect?? useEffect(()=>useFetch(id),[id]); ??
No you don't need to do that, since whenever id changes useFetch will be called with the new id on updated render and useEffect inside it will run
Thanks for your answer!! I have been solved all my question! I must will be good at create custom hook! Thank you!

Collectives™ on Stack Overflow

How can I use custom method in UseEffect?

2 Answers 2

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Related