Material-ui: Component Render API?

[christophediprima]

When using a third party Link component in a button. The animation that should cover the entire button is interrupted because of the re-rendering of the custom Link component.

[oliviertassinari]

@christophediprima A live reproduction example would have been great. I do think I know the origin of what you are describing. I have already experienced it. If you create a new component in the render lifecycle, it will get unmounted during the next render. You need to move the component creation outside. I want to look into a component render API in the future to prevent this issue.

[sebald]

Ran into this last week, I assume this is the same issue @christophediprima has.
Here is a sandbox for you: https://codesandbox.io/s/pk971py22x 🙂

Although, I am not sure if this really is MUI's fault. It's just doing you what you tell it to do. Passing an inline function to the component prop isn't great. The same is true for event handlers like onClick. It causes (unnecessary) re-renders.

To "fix" this change your component to do the following:

class ListItemLink extends React.Component {
  renderLink = (itemProps) => (
    <Link to={this.props.to} {...itemProps} />
  );

  render() {
    const{ icon, primary, secondary, to } = this.props;
    return (
      <li>
        <ListItem button component={this.renderLink}>
          {icon && <ListItemIcon>{icon}</ListItemIcon>}
          <ListItemText inset primary={primary} secondary={secondary} />
        </ListItem>
      </li>
    );
  }
}

Sandbox: https://codesandbox.io/s/6l40v1nvqr

[sebald]

If people run into the above, I suggest updating the documentation -> https://material-ui-next.com/demos/buttons/#third-party-routing-library

[oliviertassinari]

@sebald I agree. Do you want to take care of it? :)

[christophediprima]

Thanks guys! You are too kind! Sorry about this... I was on a hurry and I just wanted to ping if someone had the same issue... Shame on me!

[sebald]

@oliviertassinari Will do! ... feeling bad for not contributing to MUI anymore anyway 😇

[sebald]

@oliviertassinari I wonder where to put this information. Since re-rendering will always happen if people use an inline function for the component prop. Maybe this is a better place? And add a link to the button demo to the composition document?

Side note: I stumbled upon this when I wrote a wrapper/an abstraction that enforced some usage constraints on MUI components. I basically was "composing" MUI components :D

[oliviertassinari]

@sebald I was thinking of updating the demo with something like:

import { Link } from 'react-router-dom'
import Button from 'material-ui/Button';

+const MyLink = props => <Link to="/open-collective" {...props} />

-<Button component={props => <Link to="/open-collective" {...props} />}>
+<Button component={MyLink}>
  Link
</Button>

Maybe this is a better place?

Yeah, I haven't thought about this one. It's a great idea 👍 .

[oliviertassinari]

@sebald has documented the limitations of the component property regarding the rerendering, great job 👍 . Regarding the core issue with the render API, let's move the discussion to #10476. I'm working on a proposal.
@christophediprima Thanks for opening this issue!