u

src/components/article/ArticlePhotoTile.jsx

@@ -1,4 +1,4 @@
-import { Component, createRef } from 'react';
+import { PureComponent, createRef } from 'react';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import { StorageManagerContext } from '../../api/storageManagerContext';
@@ -11,7 +11,7 @@ import { articleWithUploadedPhoto, primaryPhoto } from '../../utils/articleDetai
 import ArticlePhoto from './ArticlePhoto';
 import ArticlePhotosDialog from './ArticlePhotosDialog';
 
-class ArticlePhotoTile extends Component {
+class ArticlePhotoTile extends PureComponent {
   static contextType = StorageManagerContext;
 
   constructor(props) {

src/components/article/ArticleTileTab.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tab from '@mui/material/Tab';
@@ -69,7 +69,7 @@ function visibleTabs(article) {
   return tabs;
 }
 
-class ArticleTileTab extends Component {
+class ArticleTileTab extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {

src/components/article/ArticleView.jsx

@@ -20,6 +20,9 @@ import ArticleViewEANs from './boxes/ArticleViewEANs';
 import ArticleViewPrice from './boxes/ArticleViewPrice';
 import ArticleViewLists from './boxes/ArticleViewLists';
 
+/** Stable prop so PureComponent photo tile does not see a new sx each render. */
+const PHOTO_TILE_SX = { minHeight: 0 };
+
 class ArticleView extends Component {
   static contextType = StorageManagerContext;
 
@@ -27,10 +30,14 @@ class ArticleView extends Component {
     super(props, context);
     const { article, unwatch } = context.article.watch(
       props.sku,
-      (next) => {this.setState({ article: next });},
+      (next) => {
+        this.setState({ article: next });
+      },
     );
     this.state = { article };
     this.unwatchArticle = unwatch;
+    this.handleTabChange = this.handleTabChange.bind(this);
+    this.handleArticleDeleted = this.handleArticleDeleted.bind(this);
   }
 
   componentDidUpdate(prevProps) {
@@ -60,7 +67,7 @@ class ArticleView extends Component {
     this.unwatchArticle = null;
   }
 
-  handleArticleDeleted = () => {
+  handleArticleDeleted() {
     const { navigate } = this.props;
     const { article } = this.state;
     const categoryState = this.context.getCategoryState();
@@ -72,13 +79,13 @@ class ArticleView extends Component {
       return;
     }
     navigate(defaultCategoryPath());
-  };
+  }
 
-  handleTabChange = (nextTab) => {
+  handleTabChange(nextTab) {
     const { navigate } = this.props;
     const { article } = this.state;
     navigate(artikelDetailPath(article, nextTab));
-  };
+  }
 
   render() {
     const { tab } = this.props;
@@ -99,7 +106,7 @@ class ArticleView extends Component {
         <ArticlePhotoTile
           wide={1}
           color="#fde68a"
-          sx={{ minHeight: 0 }}
+          sx={PHOTO_TILE_SX}
           article={article}
         />
 

src/components/article/boxes/ArticleViewBrand.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, PureComponent } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
@@ -71,7 +71,7 @@ class BrandEdit extends Component {
   }
 }
 
-export default class ArticleViewBrand extends Component {
+export default class ArticleViewBrand extends PureComponent {
   static contextType = StorageManagerContext;
 
   constructor(props) {

src/components/article/boxes/ArticleViewEANs.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, PureComponent } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
@@ -83,7 +83,7 @@ class EansEdit extends Component {
   }
 }
 
-export default class ArticleViewEANs extends Component {
+export default class ArticleViewEANs extends PureComponent {
   static contextType = StorageManagerContext;
 
   handleSave = async (draft) => {

src/components/article/boxes/ArticleViewLists.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, PureComponent } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
@@ -35,7 +35,7 @@ class RelationLine extends Component {
   }
 }
 
-export default class ArticleViewLists extends Component {
+export default class ArticleViewLists extends PureComponent {
   render() {
     const { article: articleData } = this.props;
     return (

src/components/article/boxes/ArticleViewName.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, PureComponent } from 'react';
 import { EditablePanelTile } from '../../panels';
 import SingleLineTextEdit from '../../SingleLineTextEdit';
 import { StorageManagerContext } from '../../../api/storageManagerContext';
@@ -224,7 +224,7 @@ class NameEdit extends Component {
   }
 }
 
-export default class ArticleViewName extends Component {
+export default class ArticleViewName extends PureComponent {
   static contextType = StorageManagerContext;
 
   constructor(props) {

src/components/article/boxes/ArticleViewPrice.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
@@ -364,7 +364,7 @@ class PriceEdit extends Component {
   }
 }
 
-export default class ArticleViewPrice extends Component {
+export default class ArticleViewPrice extends PureComponent {
   static contextType = StorageManagerContext;
 
   constructor(props) {

src/components/article/boxes/ArticleViewStock.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { PanelTile } from '../../panels';
@@ -25,7 +25,7 @@ class PanelValue extends Component {
 
 const SECOND_ROW_MIN_HEIGHT = 220;
 
-export default class ArticleViewStock extends Component {
+export default class ArticleViewStock extends PureComponent {
   render() {
     const { article: articleData } = this.props;
     return (