Why won't my chart.js chart render in React? - reactjs

Question

I have created this code example. I am using a React functional component, but for some reason the chart won't render. I think it is because React Hooks does not play nice with conditionals, but I don't understand why.
https://codesandbox.io/s/sparkling-darkness-e7bdj
Why doesn't the chart render?
I am using hooks because I don't want to use a class. It seems like this should work and I am getting no errors.
How can I get it to work?

Answer 1

I found a way to fix it.
Normally, the Chart constructor call goes in componentDidMount. The Hook equivalent is useEffect.
Working code is as follows:
import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import Chart from "chart.js";
import "./styles.css";
function App() {
const chartRef = useRef(null);
useEffect(() => {
if (chartRef.current) {
const myChart = new Chart(chartRef.current, {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
}
}
});
}
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<canvas ref={chartRef} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);