[core] Remove recompose

.size-limit.js

@@ -28,7 +28,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '92.4 KB',
+    limit: '91.9 KB',
   },
   {
     name: 'The theme object',
@@ -40,7 +40,7 @@ module.exports = [
     name: 'The size of the @material-ui/styles modules',
     webpack: true,
     path: 'packages/material-ui-styles/build/index.js',
-    limit: '16.4 KB',
+    limit: '16.3 KB',
   },
   {
     name: 'The size of the @material-ui/system modules',
@@ -87,7 +87,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '194 KB',
+    limit: '193 KB',
   },
   {
     name: 'The docs home page',

docs/src/pages/demos/menus/menus.md

@@ -55,13 +55,6 @@ If the height of a menu prevents all menu items from being displayed, the menu c
 
 {{"demo": "pages/demos/menus/LongMenu.js"}}
 
-## Render Props
-
-It is a [render props](https://reactjs.org/docs/render-props.html) demo that
-keeps track of the local state for a single menu.
-
-{{"demo": "pages/demos/menus/RenderPropsMenu.js"}}
-
 ## Limitations
 
 There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout.

docs/src/pages/layout/breakpoints/breakpoints.md

@@ -78,28 +78,6 @@ In the following demo, we change the rendered DOM element (*em*, <u>u</u>, ~~del
 
 {{"demo": "pages/layout/breakpoints/WithWidth.js"}}
 
-#### Render Props
-
-In some cases, you can experience property name collisions using higher-order components.
-To avoid this, you can use the [render props](https://reactjs.org/docs/render-props.html) pattern shown in the following demo.
-
-```jsx
-import Typography from '@material-ui/core/Typography';
-import toRenderProps from 'recompose/toRenderProps';
-
-const WithWidth = toRenderProps(withWidth());
-
-export default function MyComponent() {
-  return (
-    <WithWidth>
-      {({ width }) => <div>{`Current width: ${width}`}</div>}
-    </WithWidth>
-  );
-}
-```
-
-{{"demo": "pages/layout/breakpoints/RenderPropsWithWidth.js"}}
-
 ## API
 
 ### `theme.breakpoints.up(key) => media query`

docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import pure from 'recompose/pure';
 import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Link from '@material-ui/core/Link';
@@ -152,6 +151,6 @@ AppFooter.propTypes = {
 };
 
 export default compose(
-  pure,
+  React.memo,
   withStyles(styles),
 )(AppFooter);

docs/src/pages/utils/popover/SimplePopover.hooks.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles(theme => ({
+  typography: {
+    padding: theme.spacing(2),
+  },
+}));
+
+function SimplePopover() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : null;
+
+  return (
+    <div>
+      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+        Open Popover
+      </Button>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+        <Typography className={classes.typography}>The content of the Popover.</Typography>
+      </Popover>
+    </div>
+  );
+}
+
+export default SimplePopover;

docs/src/pages/utils/popover/SimplePopover.js

@@ -36,15 +36,15 @@ class SimplePopover extends React.Component {
     return (
       <div>
         <Button
-          aria-owns={open ? 'simple-popper' : undefined}
+          aria-owns={open ? 'simple-popover' : undefined}
           aria-haspopup="true"
           variant="contained"
           onClick={this.handleClick}
         >
           Open Popover
         </Button>
         <Popover
-          id="simple-popper"
+          id="simple-popover"
           open={open}
           anchorEl={anchorEl}
           onClose={this.handleClose}

docs/src/pages/utils/popover/popover.md

@@ -32,13 +32,6 @@ We demonstrate how to use the `Popover` component to implement a popover behavio
 
 {{"demo": "pages/utils/popover/MouseOverPopover.js"}}
 
-## Render Props
-
-It is a [render props](https://reactjs.org/docs/render-props.html) demo that
-keeps track of the local state for a single popover.
-
-{{"demo": "pages/utils/popover/RenderPropsPopover.js"}}
-
 ## Complementary projects
 
 For more advanced use cases you might be able to take advantage of:

docs/src/pages/utils/popper/popper.md

@@ -49,13 +49,6 @@ Highlight part of the text to see the popper:
 
 {{"demo": "pages/utils/popper/FakedReferencePopper.js"}}
 
-## Render Props
-
-It is a [render props](https://reactjs.org/docs/render-props.html) demo that
-keeps track of the local state for a single popper.
-
-{{"demo": "pages/utils/popper/RenderPropsPopper.js"}}
-
 ## Complementary projects
 
 For more advanced use cases you might be able to take advantage of:

packages/material-ui-icons/package.json

@@ -41,8 +41,7 @@
     "react-dom": "^16.8.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.2.0",
-    "recompose": "0.28.0 - 0.30.0"
+    "@babel/runtime": "^7.2.0"
   },
   "devDependencies": {
     "fs-extra": "^7.0.0",

packages/material-ui-icons/src/utils/createSvgIcon.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import pure from 'recompose/pure';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
 function createSvgIcon(path, displayName) {
@@ -10,7 +9,7 @@ function createSvgIcon(path, displayName) {
   );
 
   Icon.displayName = `${displayName}Icon`;
-  Icon = pure(Icon);
+  Icon = React.memo(Icon);
   Icon.muiName = 'SvgIcon';
 
   return Icon;