title: How to use variable declared in useEffect() in another function?
body: <p>p.s solved the problem i was having, but i would still like to hear your thoughts on this and my code, if you have time :)</p>
  
  <p>I can only assign a value to that variable ONLY after render has been completed, so i assume i must declare that variable in useEffect(), and it is impossible to assign value to it in global scope(which is executed before anything renders). But i also want to use that variable in another useEffect(), but i can't, since it's declared inside a function and it does not belong to global scope. 
  Also, is it normal to have two useEffect -s? One i need for grabbing a context of canvas, and keeping that context consistent (not grabbing new one on every DOM update, as it happens when i don't put [] as second argument of first useEffect). And the other is for doing things with that unique context as state changes. Does it make sense? My code: </p>
  
  <pre><code>import React, { useState, useRef, useEffect } from "react";
  import { degreesToRadiansFlipped } from "./helpers/degreesToRadiansFlipped";
  function Circle() {
    let [degree, setDegree] = useState(0);
    const canvas = useRef();
    const inputField = useRef();
    const coordinateX = Math.cos(degreesToRadiansFlipped(degree)) * 100 + 250;
    const coordinateY = Math.sin(degreesToRadiansFlipped(degree)) * 100 + 250;
  
    useEffect(() =&gt; {
      const context = canvas.current.getContext("2d");
      drawCircle(context, coordinateX, coordinateY);
      return context;
      /*return function cleanUp() {
        context.clearRect(0, 0, 500, 500);
        context.beginPath();
        drawCircle(context, coordinateX, coordinateY);
      };*/
    }, []);
    useEffect(() =&gt; {
      drawCircle(context, coordinateX, coordinateY);
    }, [degree]);
    let drawCircle = function(context, x, y) {
      context.beginPath();
      //arc has option to make it anti-clockwise, making flipping radians redundant
      context.arc(250, 250, 100, 0, Math.PI * 2);
      context.moveTo(250, 250);
      context.lineTo(x, y);
      context.stroke();
    };
  
    return (
      &lt;div&gt;
        &lt;canvas ref={canvas} width={500} height={500}&gt;&lt;/canvas&gt;
        &lt;form
          onSubmit={(e) =&gt; {
            e.preventDefault();
            setDegree(inputField.current.value);
          }}
        &gt;
          &lt;input type="text" ref={inputField}&gt;&lt;/input&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default Circle;
  </code></pre>