I am currently trying to learn about the html canvas, following tutorials which just do the following with Vanilla JS:

const canvas = document.getElementById("#myCanvas");
const context = canvas.getContext("2d");

I tried to use the useRef hook in addition, because I am using React to build the same. It kept displaying errors, so I console logged the canvas value as follows and I keep getting “null”:

import React, {useRef} from 'react';
import './App.css'

const Canvas = () => {
    const canvasRef = useRef(null);
    const canvas = canvasRef.current;
    console.log(canvas);  //LOGS "null"
    const context = canvas.getContext("2d"); //HENCE THIS PRODUCES ERROR "can't read getContext() of null"

    return (
        <canvas id = "myCanvas" ref = {canvasRef}>
            
        </canvas>
    );
};

export default Canvas;

I have come across some solutions that use the useEffect hook. But I have heard that using useEffect might not be a good practice in React coding.

Moreover, those examples put almost all of the canvas coding inside the useEffect hook! That certainly feels like bad code design.

Is there any other way to go about this?