I have a React application, in which I need:

1. Set the initial state
2. Create an object, if the initial object doesn’t exists
3. Update the created object
4. Get the updated object

I want to do this with custom hooks and local state. For now I don’t want to use Redux or other state-centrilized solutions

I am a bit confused, because I haven’t been working with React for some time and I forget the concept a bit… I wanted to split the code from one huge piece of code inside one useEffect and use a custom a hook per one rest request plus some logic aroud this.

This is not my real code, but it’s quit close to it.
This is my main component.

function MyApp() {
  const [myState, setMyState] = useState(myInitialObject);

  // hook where I create a new object via post request
  const { newObject } = useCreateMyNewObject(myState);

  // hook where I update the created object via put request, I dont need the result
  useUpdateMyNewObject(newObject);

  // hook where I call get method
  const updatedObject = useFetch(newObject);

  return (
    <>      
       { use properties of updatedObject }
    </>
  );
}

It calls post method twice, put – ones and get – never.
We use strict mode, and I guess this is why post method is called twice, but I have no idea why get (useFetch hook) doesn’t work.

This is not real code of the useFetch hook:

const useFetch = (myInitialObject) => {
  const [myState, setMyState] = useState(myInitialObject);

  useEffect(() => {
    if (!myState?.id) {
      return;
    }

    async function fetchFromServer(id) {
       const fetchedObject = await fetchObject(id);
       setMyState(fetchedObject );
    }

    fetchFromServer(myState.id)

  }, [myState]);

  return myState;
};

My question is what do I do wrong?