React Hooks - Multiple request with useEffect()?

React Hooks - Multiple request with useEffect()?

Hey guys, I’m struggling at this point with useEffect() in React Hooks. I had working code and now switching over to Hooks, I am unsure how to get my Post, Put, & Delete requests in useEffect() within the same parent component (unless a better practice would be to modularize the requests?) and pass the data down into the child components. How can I have my async functions that handle the requests and updating the state in a useEffect() while also passing the function down as a prop to be available on click? Also, does the dependency array need to have a piece of state to rely on at all times?

The GET request is currently in a useEffect() and working properly. The POST & DEL both seem to work being outside of the useEffect() , I just know it’s not good practice and I need to get this right. I have tried digging through the docs and googling, but I’m pretty stuck.

Sounds like you’ve almost cracked it and probably just need some minor tweaks. Is your code available to share somewhere?

It’s on this branch in this file. The functions postArt, editArt, & deleteArt

@chuckadams, if you have any ideas I would love to hear it! Thank you.

I ask for the source in the hopes that people with more cycles will look into it, as I’ve never used React hooks except to play with them.

As a functional programmer, I’m a little mixed on the idea of React hooks in general, since they’re not pure functions. But a full-blown effect system is an unrealistic expectation, especially in vanilla JS, and hooks at least help confine effects to a narrower scope. To say nothing of the more elegant syntax.