🐛 Moved state change in DraftConfigurator from render loop to useState. Fixes #105

CHANGELOG.md

@@ -17,6 +17,7 @@
  - [#104](https://github.com/freesewing/freesewing.org/issues/104): Changed `onDragEnd` to `onChangeCommitted` in slider element (change in material-ui API when slider came out of beta)
  - Workbench now also lets you preload a `withBreasts` set of measurements
  - DraftConfigurator now properly styles pattern options 3 levels deep
+ - [#105](https://github.com/freesewing/freesewing.org/issues/105): Moved state change in render loop to useEffect
 
 ### create-freesewing-pattern
 

config/changelog.yaml

@@ -20,6 +20,8 @@ Unreleased:
         (change in material-ui API when slider came out of beta)"
       - Workbench now also lets you preload a `withBreasts` set of measurements
       - DraftConfigurator now properly styles pattern options 3 levels deep
+      - "[#105](https://github.com/freesewing/freesewing.org/issues/105):
+        Moved state change in render loop to useEffect"
     create-freesewing-pattern:
       - Added missing `file-saver` dependency
     jaeger:

packages/components/src/.form/FormFieldBool/index.js

@@ -1,48 +1,49 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import Radio from '@material-ui/core/Radio'
+import RadioGroup from '@material-ui/core/RadioGroup'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
 
 const Bool = props => {
-  const [value, setValue] = useState(props.dflt);
+  const [value, setValue] = useState(props.dflt)
+  useEffect(() => {
+    if (props.value !== value) setValue(props.value)
+  }, [props.value])
   const toggle = () => {
-    props.updateValue(props.name, !value);
-    setValue(!value);
-  };
-  // Force state update when rerendering due to props change
-  if (props.value !== value) setValue(props.value);
+    props.updateValue(props.name, !value)
+    setValue(!value)
+  }
 
   return (
     <RadioGroup onChange={toggle} value={JSON.stringify(value)}>
       <FormControlLabel
         control={<Radio color="primary" />}
         value="false"
-        checked={value === "false" || value === false ? true : false}
+        checked={value === 'false' || value === false ? true : false}
         label={props.labels[0]}
         className="po-list-item"
       />
       <FormControlLabel
         control={<Radio color="primary" />}
         value="true"
-        checked={value === "true" || value === true ? true : false}
+        checked={value === 'true' || value === true ? true : false}
         label={props.labels[1]}
         className="po-list-item"
       />
     </RadioGroup>
-  );
-};
+  )
+}
 
 Bool.propTypes = {
   dflt: PropTypes.bool,
   labels: PropTypes.array,
   updateValue: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired
-};
+}
 
 Bool.defaultProps = {
   dflt: false,
-  labels: ["false", "true"]
-};
+  labels: ['false', 'true']
+}
 
-export default Bool;
+export default Bool

packages/components/src/.form/FormFieldList/index.js

@@ -1,17 +1,18 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import Radio from '@material-ui/core/Radio'
+import RadioGroup from '@material-ui/core/RadioGroup'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
 
 const FormFieldList = props => {
-  const [value, setValue] = useState(props.dflt);
+  const [value, setValue] = useState(props.dflt)
+  useEffect(() => {
+    if (props.value !== value) setValue(props.value)
+  }, [props.value])
   const update = evt => {
-    props.updateValue(props.name, evt.target.value);
-    setValue(evt.target.value);
-  };
-  // Force state update when rerendering due to props change
-  if (props.value !== value) setValue(props.value);
+    props.updateValue(props.name, evt.target.value)
+    setValue(evt.target.value)
+  }
 
   return (
     <RadioGroup onChange={update} value={value}>
@@ -26,8 +27,8 @@ const FormFieldList = props => {
         />
       ))}
     </RadioGroup>
-  );
-};
+  )
+}
 
 FormFieldList.propTypes = {
   dflt: PropTypes.oneOfType([
@@ -38,6 +39,6 @@ FormFieldList.propTypes = {
   list: PropTypes.object,
   updateValue: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired
-};
+}
 
-export default FormFieldList;
+export default FormFieldList

packages/components/src/.form/FormFieldSlider/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import Slider from '@material-ui/core/Slider'
 import { withStyles } from '@material-ui/core/styles'
@@ -13,15 +13,15 @@ const PaddedSlider = withStyles({
 
 const FormFieldSlider = props => {
   const [value, setValue] = useState(props.value)
+  useEffect(() => {
+    if (props.value !== value) setValue(props.value)
+  }, [props.value])
 
   const update = (evt, newValue) => {
     props.updateValue(props.name, newValue, evt)
     setValue(newValue)
   }
 
-  // Force state update when rerendering due to props change
-  if (props.value !== value) setValue(props.value)
-
   return (
     <PaddedSlider
       value={value}