React useRef is undefined

Question

I think I may be misusing useRef here. When I try to draw to the canvas I am getting the following error: cannot set 'fillStyle' of undefined.

import React, { useEffect, useRef } from "react";
import useWindowSize from "../hooks/useWindowSize";

export default function Player() {
  const canvasRef = useRef();
  const ctx = useRef();

  useEffect(() => {
    ctx.current = canvasRef.current.getContext("2d");
  }, []);
  ctx.current.fillStyle = "green";
  ctx.current.fillRect(20, 20, 150, 100);
  return (
    <React.Fragment>
      <div>Hello</div>
      <canvas ref={canvasRef} width="500" height="500" />
    </React.Fragment>
  );
}

what is ctx? your using useRef but never assigning that ref to anything? — Willman.Codes
– Willman.Codes, Commented Oct 21, 2019 at 22:15
Hi thanks for your comment I think I assign cnvRef.current.getContext(‘2d’) to ctx.current in useEffect function — James
– James, Commented Oct 21, 2019 at 22:21

Hamza El Aoutar · Accepted Answer · 2019-10-21 22:27:00Z

7

The first time you are trying to access ctx.current, it's still undefined because the assignment inside this effect still didn't happen:

useEffect(()=>{
    ctx.current = canvasRef.current.getContext('2d')
},[])

This is because the effect is run after the rendering phase.

You need to do that inside useEffect instead:

useEffect(()=>{
    ctx.current = canvasRef.current.getContext('2d')
    ctx.current.fillStyle= "green"
    ctx.current.fillRect(20,20,150,100)
},[])

edited Oct 21, 2019 at 22:27

answered Oct 21, 2019 at 22:06

Hamza El Aoutar

5,6873 gold badges20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hamza El Aoutar Over a year ago

@James, I updated my answer to better explain what's happening, I guess the mistake you were making is thinking that the effect run before the render phase.

Collectives™ on Stack Overflow

React useRef is undefined

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related