Ref returns null when resize

Question

I've trying to get ref and want to check whether it has value.

It has value at first time, but when I resize the chart it disappears.

I think this issue would related with react not the chart library.

Any ideas?

https://codesandbox.io/s/billboardjs-resize-onresize-bug-28fvz

const Page1 = props => {
  const [isResize, setIsResize] = useState(false);
  const chartRef = createRef();

  const options = {
    onresize(ctx) {
      console.log(chartRef.current);
      setIsResize(true);
    },
    onresized(ctx) {
      setIsResize(false);
    },
    data: {
      columns: [
        ["data1", 30, 200, 100, 170, 150, 250],
        ["data2", 130, 100, 140, 35, 110, 50]
      ],
      types: {
        data1: "line",
        data2: "area-spline"
      },
      colors: {
        data1: "red",
        data2: "green"
      }
    }
  };
  return (
    <div>
      <Chart
        className="timelineChart"
        options={options}
        isResize={isResize}
        ref={chartRef}
      />
    </div>
  );
};

please validate answer if it's correct – François Richard Feb 27 '20 at 11:07 — François Richard, Feb 27 '20 at 11:07

François Richard · Accepted Answer · 2020-02-27T11:07:07.340

4

I guess this is because the options object is keeping the first ref, and createRef() always return a new ref.

Use useRef() instead of createRef()

Let me know if it helps.

I tried it on JillAndMe link and it works: https://codesandbox.io/s/billboardjs-resize-onresize-bug-28fvz

edited Feb 27 '20 at 11:07

answered Feb 27 '20 at 09:08

François Richard

6,817
10
43
78

1

well, it's easy, replace const chartRef = createRef(); with const chartRef = useRef(); – François Richard Feb 27 '20 at 11:03
Great! I should know the difference between createRef() and useRef() – JillAndMe Feb 28 '20 at 00:26
I think it is related with functional component when I use it with craeteRef() – JillAndMe Feb 28 '20 at 01:40

Ref returns null when resize

1 Answers1