mui · oliviertassinari · Aug 11, 2018 · Aug 11, 2018
diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
@@ -277,9 +277,8 @@ function withRoot(Component) {
     redux = null;
 
     constructor(props) {
-      super(props);
-
-      this.redux = initRedux(this.props.reduxServerState || {});
+      super();
+      this.redux = initRedux(props.reduxServerState || {});
     }
 
     getChildContext() {

diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
@@ -36,9 +36,8 @@ class ConfirmationDialogRaw extends React.Component {
   radioGroupRef = null;
 
   constructor(props) {
-    super(props);
-
-    this.state.value = this.props.value;
+    super();
+    this.state.value = props.value;
   }
 
   state = {};

diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js
@@ -113,29 +113,25 @@ const styles = theme => ({
 });
 
 class CustomPaginationActionsTable extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      rows: [
-        createData('Cupcake', 305, 3.7),
-        createData('Donut', 452, 25.0),
-        createData('Eclair', 262, 16.0),
-        createData('Frozen yoghurt', 159, 6.0),
-        createData('Gingerbread', 356, 16.0),
-        createData('Honeycomb', 408, 3.2),
-        createData('Ice cream sandwich', 237, 9.0),
-        createData('Jelly Bean', 375, 0.0),
-        createData('KitKat', 518, 26.0),
-        createData('Lollipop', 392, 0.2),
-        createData('Marshmallow', 318, 0),
-        createData('Nougat', 360, 19.0),
-        createData('Oreo', 437, 18.0),
-      ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
-      page: 0,
-      rowsPerPage: 5,
-    };
-  }
+  state = {
+    rows: [
+      createData('Cupcake', 305, 3.7),
+      createData('Donut', 452, 25.0),
+      createData('Eclair', 262, 16.0),
+      createData('Frozen yoghurt', 159, 6.0),
+      createData('Gingerbread', 356, 16.0),
+      createData('Honeycomb', 408, 3.2),
+      createData('Ice cream sandwich', 237, 9.0),
+      createData('Jelly Bean', 375, 0.0),
+      createData('KitKat', 518, 26.0),
+      createData('Lollipop', 392, 0.2),
+      createData('Marshmallow', 318, 0),
+      createData('Nougat', 360, 19.0),
+      createData('Oreo', 437, 18.0),
+    ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+    page: 0,
+    rowsPerPage: 5,
+  };
 
   handleChangePage = (event, page) => {
     this.setState({ page });

diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -180,32 +180,28 @@ const styles = theme => ({
 });
 
 class EnhancedTable extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      order: 'asc',
-      orderBy: 'calories',
-      selected: [],
-      data: [
-        createData('Cupcake', 305, 3.7, 67, 4.3),
-        createData('Donut', 452, 25.0, 51, 4.9),
-        createData('Eclair', 262, 16.0, 24, 6.0),
-        createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-        createData('Gingerbread', 356, 16.0, 49, 3.9),
-        createData('Honeycomb', 408, 3.2, 87, 6.5),
-        createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-        createData('Jelly Bean', 375, 0.0, 94, 0.0),
-        createData('KitKat', 518, 26.0, 65, 7.0),
-        createData('Lollipop', 392, 0.2, 98, 0.0),
-        createData('Marshmallow', 318, 0, 81, 2.0),
-        createData('Nougat', 360, 19.0, 9, 37.0),
-        createData('Oreo', 437, 18.0, 63, 4.0),
-      ],
-      page: 0,
-      rowsPerPage: 5,
-    };
-  }
+  state = {
+    order: 'asc',
+    orderBy: 'calories',
+    selected: [],
+    data: [
+      createData('Cupcake', 305, 3.7, 67, 4.3),
+      createData('Donut', 452, 25.0, 51, 4.9),
+      createData('Eclair', 262, 16.0, 24, 6.0),
+      createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+      createData('Gingerbread', 356, 16.0, 49, 3.9),
+      createData('Honeycomb', 408, 3.2, 87, 6.5),
+      createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+      createData('Jelly Bean', 375, 0.0, 94, 0.0),
+      createData('KitKat', 518, 26.0, 65, 7.0),
+      createData('Lollipop', 392, 0.2, 98, 0.0),
+      createData('Marshmallow', 318, 0, 81, 2.0),
+      createData('Nougat', 360, 19.0, 9, 37.0),
+      createData('Oreo', 437, 18.0, 63, 4.0),
+    ],
+    page: 0,
+    rowsPerPage: 5,
+  };
 
   handleRequestSort = (event, property) => {
     const orderBy = property;

diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -84,8 +84,7 @@ class ExpansionPanel extends React.Component {
   isControlled = null;
 
   constructor(props) {
-    super(props);
-
+    super();
     this.isControlled = props.expanded != null;
     if (!this.isControlled) {
       // not controlled, use internal state

diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
@@ -46,11 +46,10 @@ export const styles = {
  */
 class FormControl extends React.Component {
   constructor(props) {
-    super(props);
-
+    super();
     // We need to iterate through the children and find the Input in order
     // to fully support server side rendering.
-    const { children } = this.props;
+    const { children } = props;
     if (children) {
       React.Children.forEach(children, child => {
         if (!isMuiElement(child, ['Input', 'Select', 'NativeSelect'])) {

diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
@@ -233,13 +233,15 @@ function formControlState(props, context) {
 }
 
 class Input extends React.Component {
-  isControlled = this.props.value != null;
+  isControlled = null;
 
   input = null; // Holds the input reference
 
   constructor(props, context) {
     super(props, context);
 
+    this.isControlled = props.value != null;
+
     if (this.isControlled) {
       this.checkDirty(props);
     }

diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js
@@ -42,7 +42,7 @@ export const styles = {
  * @ignore - internal component.
  */
 class Textarea extends React.Component {
-  isControlled = this.props.value != null;
+  isControlled = null;
 
   shadowRef = null;
 
@@ -57,8 +57,8 @@ class Textarea extends React.Component {
   }, 166); // Corresponds to 10 frames at 60 Hz.
 
   constructor(props) {
-    super(props);
-
+    super();
+    this.isControlled = props.value != null;
     // <Input> expects the components it renders to respond to 'value'
     // so that it can check whether they are filled.
     this.value = props.value || props.defaultValue || '';

diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -55,10 +55,9 @@ class Modal extends React.Component {
   mounted = false;
 
   constructor(props) {
-    super(props);
-
+    super();
     this.state = {
-      exited: !this.props.open,
+      exited: !props.open,
     };
   }
 

diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
@@ -35,10 +35,9 @@ class Popper extends React.Component {
   popper = null;
 
   constructor(props) {
-    super(props);
-
+    super();
     this.state = {
-      exited: !this.props.open,
+      exited: !props.open,
     };
   }
 

diff --git a/packages/material-ui/src/RootRef/RootRef.js b/packages/material-ui/src/RootRef/RootRef.js
@@ -22,8 +22,8 @@ function setRef(ref, value) {
  * import RootRef from '@material-ui/core/RootRef';
  *
  * class MyComponent extends React.Component {
- *   constructor(props) {
- *     super(props);
+ *   constructor() {
+ *     super();
  *     this.domRef = React.createRef();
  *   }
  *

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -91,8 +91,7 @@ class Tooltip extends React.Component {
   };
 
   constructor(props) {
-    super(props);
-
+    super();
     this.isControlled = props.open != null;
     this.state = {
       open: null,

diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
@@ -40,8 +40,7 @@ class SwitchBase extends React.Component {
   isControlled = null;
 
   constructor(props) {
-    super(props);
-
+    super();
     this.isControlled = props.checked != null;
     if (!this.isControlled) {
       // not controlled, use internal state

diff --git a/packages/material-ui/src/styles/MuiThemeProvider.js b/packages/material-ui/src/styles/MuiThemeProvider.js
@@ -19,12 +19,11 @@ class MuiThemeProvider extends React.Component {
   outerTheme = null;
 
   constructor(props, context) {
-    super(props, context);
-
+    super();
     // Get the outer theme from the context, can be null
     this.outerTheme = themeListener.initial(context);
     // Propagate the theme so it can be accessed by the children
-    this.broadcast.setState(this.mergeOuterLocalTheme(this.props.theme));
+    this.broadcast.setState(this.mergeOuterLocalTheme(props.theme));
   }
 
   getChildContext() {

diff --git a/packages/material-ui/src/styles/withStyles.js b/packages/material-ui/src/styles/withStyles.js
@@ -85,10 +85,9 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
 
     constructor(props, context) {
       super(props, context);
+      this.jss = context[ns.jss] || jss;
 
-      this.jss = this.context[ns.jss] || jss;
-
-      const { muiThemeProviderOptions } = this.context;
+      const { muiThemeProviderOptions } = context;
       if (muiThemeProviderOptions) {
         if (muiThemeProviderOptions.sheetsManager) {
           this.sheetsManager = muiThemeProviderOptions.sheetsManager;
@@ -103,7 +102,7 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
       this.stylesCreatorSaved = stylesCreator;
       this.sheetOptions = {
         generateClassName,
-        ...this.context[ns.sheetOptions],
+        ...context[ns.sheetOptions],
       };
       // We use || as the function call is lazy evaluated.
       this.theme = listenToTheme ? themeListener.initial(context) || getDefaultTheme() : noopTheme;

diff --git a/packages/material-ui/src/styles/withTheme.js b/packages/material-ui/src/styles/withTheme.js
@@ -22,8 +22,7 @@ const withTheme = () => Component => {
     unsubscribeId = null;
 
     constructor(props, context) {
-      super(props, context);
-
+      super();
       this.state = {
         // We use || as the function call is lazy evaluated.
         theme: themeListener.initial(context) || getDefaultTheme(),

diff --git a/pages/api/root-ref.md b/pages/api/root-ref.md
@@ -19,8 +19,8 @@ import React from 'react';
 import RootRef from '@material-ui/core/RootRef';
 
 class MyComponent extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.domRef = React.createRef();
   }