SCM-Manager/docs/en/development/common-pitfall.md

title

title
Common pitfall occurred while developing the SCM V2

React Component is loaded unexpectedly

Bug

A react component is updated without any changes in the props or states.

Fix

Use the why-did-you-update library to analyze the causes of the updates.

A common cause is the definition of new functions in render().

Example

class Main extends React.Component<Props> {
  render() {
    const { authenticated, links } = this.props;
    const redirectUrlFactory = binder.getExtension("main.redirect", this.props);

    ...

    const ActivityRoute = ({ authenticated, links }: RouteProps) => {
      return (
        <ProtectedRoute
          path="/activity"
          component={() => <Activity activityUrl={links.activity.href} />}
          authenticated={authenticated && links.activity.href}
        />
      );
    };
  }
}

binder.bind("main.route", ActivityRoute);

the definition of the Component like this:

component={() => <Activity activityUrl={links.activity.href} />}

triggers a re-render because:

() => <Activity activityUrl={links.activity.href} />  !== () => <Activity activityUrl={links.activity.href} />

You can avoid it by binding this function in advance and then reusing it on all renders

class ActivityRoute extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
  }

  renderActivity = () => {
    const { links } = this.props;
    return <Activity activityUrl={links.activity.href} />;
  };

  render() {
    const { authenticated, links } = this.props;

    return (
      <ProtectedRoute
        path="/activity"
        component={this.renderActivity}
        authenticated={authenticated && links.activity.href}
      />
    );
  }
}

binder.bind("main.route", ActivityRoute);