Remove flickering when changing page

navikt · Jul 30, 2019 · d935779 · d935779
1 parent beba0c9
commit d935779
Showing 1 changed file with 12 additions and 7 deletions.
diff --git a/src/components/widgets/Uenigboks.jsx b/src/components/widgets/Uenigboks.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox, Input } from 'nav-frontend-skjema';
 import { InnrapporteringContext } from '../../context/InnrapporteringContext';
@@ -14,19 +14,24 @@ Input.propTypes = {
 const Uenigboks = ({ label }) => {
     const id = label + decodeURIComponent(window.location.pathname);
     const innrapportering = useContext(InnrapporteringContext);
-    const [checked, setChecked] = useState(false);
-    const [inputValue, setInputValue] = useState('');
+
+    const uenighet = useMemo(
+        () => innrapportering.uenigheter.find(uenighet => uenighet.id === id),
+        [innrapportering.uenigheter]
+    );
+
+    const [checked, setChecked] = useState(!!uenighet);
+    const [inputValue, setInputValue] = useState(
+        uenighet ? uenighet.value : ''
+    );
     const ref = useFocusRef(checked && inputValue === '');
 
     useEffect(() => {
-        const uenighet = innrapportering.uenigheter.find(
-            uenighet => uenighet.id === id
-        );
         if (uenighet) {
             setChecked(true);
             setInputValue(uenighet.value || '');
         }
-    }, [innrapportering.uenigheter]);
+    }, [uenighet]);
 
     const onCheckboxChange = e => {
         setChecked(e.target.checked);