fix: Use useRef rather than useState for DOM references

react-bootstrap · Jul 3, 2019 · 1877431 · 1877431
1 parent 20eb49d
commit 1877431
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/www/src/components/ReactPlayground.js b/www/src/components/ReactPlayground.js
@@ -3,7 +3,7 @@
 import classNames from 'classnames';
 import styled, { css } from 'astroturf';
 import qsa from 'dom-helpers/query/querySelectorAll';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import * as ReactBootstrap from 'react-bootstrap';
@@ -22,6 +22,7 @@ import Sonnet from './Sonnet';
 
 const scope = {
   useEffect,
+  useRef,
   useState,
   ...ReactBootstrap,
   ReactDOM,

diff --git a/www/src/examples/Overlays/Overlay.js b/www/src/examples/Overlays/Overlay.js
@@ -1,15 +1,13 @@
 function Example() {
   const [show, setShow] = useState(false);
-  const [target, setTarget] = useState(null);
-
-  const attachRef = targ => setTarget(targ);
+  const target = useRef(null);
 
   return (
     <>
-      <Button variant="danger" ref={attachRef} onClick={() => setShow(!show)}>
+      <Button variant="danger" ref={target} onClick={() => setShow(!show)}>
         Click me to see
       </Button>
-      <Overlay target={target} show={show} placement="right">
+      <Overlay target={target.current} show={show} placement="right">
         {({
           placement,
           scheduleUpdate,

diff --git a/www/src/examples/Overlays/TooltipOverlay.js b/www/src/examples/Overlays/TooltipOverlay.js
@@ -1,15 +1,13 @@
 function Example() {
   const [show, setShow] = useState(false);
-  const [target, setTarget] = useState(null);
-
-  const attachRef = targ => setTarget(targ);
+  const target = useRef(null);
 
   return (
     <>
-      <Button ref={attachRef} onClick={() => setShow(!show)}>
+      <Button ref={target} onClick={() => setShow(!show)}>
         Click me!
       </Button>
-      <Overlay target={target} show={show} placement="right">
+      <Overlay target={target.current} show={show} placement="right">
         {props => (
           <Tooltip id="overlay-example" {...props}>
             My Tooltip