everyone
while I am working on React Function Component, I got the same problem everyday. it is useeffect dependency problem.
my working flow like the following to get the data by calling the RestAPI
- define useeffect with empty array [] for component did mount event. I want run the calling api one time
- add API calling function inside useeffect
my working code like the following.
const DevicesMain = () => { console.log("Devices Main render") const [state, dispatch] = useReducer(reducer, initialState) const [sites, rooms, devices] = useSelector((state) => [state.sites, state.rooms, state.devices]) const reduxDispatch = useDispatch() useEffect(() => { console.log("did mount") if (!sites.get) { reduxDispatch(siteActions.getALL()) } if (!rooms.get) { reduxDispatch(roomActions.getALL()) } reduxDispatch(deviceActions.getALLWithIncludeCount()) return () => { console.log("will unmount") if (subscription) { subscription.unsubscribe() } } }, []) return ( <> ... </> ) } after that, always I got the dependency missing Waring like the following.
React Hook useEffect has missing dependencies: 'reduxDispatch', 'rooms.get', 'sites.get', and 'subscription'. Either include them or remove the dependency array react-hooks/exhaustive-deps exactly the above warning makes my headache. for some days, I tried to remove this warning.
at first, I added the dependencides that the warning message mentioned to me like the following.
}, [reduxDispatch, rooms.get, sites.get, subscription]) after adding like the above, useeffect function is running over 1 time, as that function has rooms.get and sites.get as its dependency.
as you see my the above image, there are serveral did mount log.
secondly, I disabled eslint like the following
// eslint-disable-next-line }, []) exactly, I think that this is very basic problem. but still I didn't find what is the best solution for useeffect one time run.
if you give me the best solution, I am thanksful
Regards
