There are quite some common pitfalls which can cause an inconsistent or broken ui.\nYou can avoid most ugly ui glitches and broken surfaces or just improve your frontend code\nby asking yourself some questions while building the components.
\nThere exists a scm styleguide which can support you build fitting and beautiful ui components.\nFind the styleguide in \"scm-ui/ui-styles\".
\nThe SCM-Manager provides a storybook which tests many reuseable components with usage examples.\nYou can also find some more ui components which doesn't have stories yet in \"scm-ui/ui-components\".\nIf a component which can be reused is missing, feel free to add it to ui-components.
\nA react component is updated without any changes in the props or states.
\nUse the why-did-you-update library to analyze the causes of the updates.
\nA common cause is the definition of new functions in render().
\nclass Main extends React.Component<Props> {\n render() {\n const { authenticated, links } = this.props;\n const redirectUrlFactory = binder.getExtension(\"main.redirect\", this.props);\n\n ...\n\n const ActivityRoute = ({ authenticated, links }: RouteProps) => {\n return (\n <ProtectedRoute\n path=\"/activity\"\n component={() => <Activity activityUrl={links.activity.href} />}\n authenticated={authenticated && links.activity.href}\n />\n );\n };\n }\n}\n\nbinder.bind(\"main.route\", ActivityRoute);the definition of the Component like this:
\ncomponent={() => <Activity activityUrl={links.activity.href} />}triggers a re-render because:
\n() => <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
\nclass ActivityRoute extends React.Component<Props> {\n constructor(props: Props) {\n super(props);\n }\n\n renderActivity = () => {\n const { links } = this.props;\n return <Activity activityUrl={links.activity.href} />;\n };\n\n render() {\n const { authenticated, links } = this.props;\n\n return (\n <ProtectedRoute\n path=\"/activity\"\n component={this.renderActivity}\n authenticated={authenticated && links.activity.href}\n />\n );\n }\n}\n\nbinder.bind(\"main.route\", ActivityRoute);