From 6c9737e1e95070aaf77c752763a8b99ca122d410 Mon Sep 17 00:00:00 2001
From: Bradley Gaynor <BradleyGaynor@northwesternmutual.com>
Date: Thu, 31 Oct 2019 12:48:33 -0500
Subject: [PATCH] Reorganized useEffect in accordin

---
 src/components/accordion/Accordion.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
index 9d8a4c8..d240e67 100644
--- a/src/components/accordion/Accordion.js
+++ b/src/components/accordion/Accordion.js
@@ -15,20 +15,19 @@ function useAccordion() {
 // We also pass second parameter to this function where we implement our own comparison
 const AccordionPanel = React.memo(
   props => {
-    console.log(props.label + " rendered");
+    const { label, onClick, isOpen, content } = props
+    console.log(label + " rendered");
     const containerRef = useRef();
 
     useEffect(() => {
-      if (props.isOpen) {
-        console.log(`scroll ${props.label} into view`);
-        scrollIntoView(containerRef.current, { block: 'nearest', scrollMode: 'if-needed' });
-      }
-    });
+      console.log(`scroll ${label} into view`);
+      scrollIntoView(containerRef.current, { block: 'nearest', scrollMode: 'if-needed' });
+    }, [isOpen]);
 
     return (
-      <div onClick={props.onClick} ref={containerRef}>
-        <div className="accordion-label">{props.label}</div>
-        {props.isOpen && <div>{props.content}</div>}
+      <div onClick={onClick} ref={containerRef}>
+        <div className="accordion-label">{label}</div>
+        {isOpen && <div>{content}</div>}
       </div>
     );
   }, // practically shouldComponentUpdate, but reversed