Q:

My variable has not updated yet when I create my onClick function since useEffect is run last

I am completely new to ReactJS. Please be kind, I really could not find an answer to my problem.
In useEffect I update my variable (which is an array of objects) and in my onClick function I want to update my variable again. 
Since useEffect runs after I create my onClick function, my variable is still empty on onClick. I need to be able to access my updated variable in my onClick function.
How can I update my variable in useEffect first, before I create my onClick function?
const [myvariable, setMyvariable] = useState([{}]);

useEffect({
    setMyVariable([{
       id: 1
    }]);
}, []);

const onClick = () => {
    // update my variable here
    setMyVariable(prev => [...prev, {name: 'My name'} ]); // <-- Code here is probably not correct but you get the idea. 
    // prev is an empty object at this point since useEffect has not run yet
}

A:

useEffect with an empty dependency array is made to run after the component mounts, you can't make it run before you render. And you're defining the onClick function, not running it, so it won't change the state. Is there a reason why you don't set the initial state when you initialize it?
const [myvariable, setMyvariable] = useState({id: 1});

So here's how it goes:
const [myvariable, setMyvariable] = useState([});
const loadData = () => {
  fetch(`${process.env.REACT_APP_API_URL}`, {
    method: "Get"
  })
    .then(res => {
      return res.json();
    })
    .then(resData => {
      if (resData.errors) {
        throw new Error("error.");
      }
      setMyvariable([...resData]);
    });
};
useEffect(() => {
  loadData(); // Fetchs after mount
}, []);
// Fetchs on click
return <button onClick={loadData}>Fetch</button>;

