fix: replace createRef with useRef in Functional Components. (#1524)

elastic · Dec 14, 2021 · 9538417 · 9538417
1 parent 51f50df
commit 9538417
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/packages/charts/src/components/accessibility/partitions_data_table.tsx b/packages/charts/src/components/accessibility/partitions_data_table.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { createRef, memo, useState } from 'react';
+import React, { useRef, memo, useState } from 'react';
 import { connect } from 'react-redux';
 
 import {
@@ -39,7 +39,7 @@ const ScreenReaderPartitionTableComponent = ({
   debug,
 }: ScreenReaderPartitionTableProps) => {
   const [count, setCount] = useState(1);
-  const tableRowRef = createRef<HTMLTableRowElement>();
+  const tableRowRef = useRef<HTMLTableRowElement>(null);
   const { tableCaption } = a11ySettings;
 
   const rowLimit = TABLE_PAGINATION * count;

diff --git a/storybook/stories/interactions/16_cursor_update_action.story.tsx b/storybook/stories/interactions/16_cursor_update_action.story.tsx
@@ -52,8 +52,8 @@ const getSeriesKnob = (group?: string) => {
 };
 
 export const Example = () => {
-  const ref1 = React.createRef<Chart>();
-  const ref2 = React.createRef<Chart>();
+  const ref1 = React.useRef<Chart>(null);
+  const ref2 = React.useRef<Chart>(null);
   const pointerUpdate = (event: PointerEvent) => {
     action('onPointerUpdate')(event);
     if (ref1.current) {

diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx
@@ -36,7 +36,7 @@ export const Example = () => {
   /**
    * The handler section of this story demonstrates the PNG export functionality
    */
-  const chartRef: React.RefObject<Chart> = React.createRef();
+  const chartRef = React.useRef<Chart>(null);
   const handler = () => {
     if (!chartRef.current) {
       return;

diff --git a/storybook/stories/interactions/18_null_values.story.tsx b/storybook/stories/interactions/18_null_values.story.tsx
@@ -50,8 +50,8 @@ const getSeriesKnob = (group?: string) => {
 };
 
 export const Example = () => {
-  const ref1 = React.createRef<Chart>();
-  const ref2 = React.createRef<Chart>();
+  const ref1 = React.useRef<Chart>(null);
+  const ref2 = React.useRef<Chart>(null);
   const pointerUpdate = (event: PointerEvent) => {
     action('onPointerUpdate')(event);
     if (ref1.current) {