React (Native) optimizations/performance

react/features/base/participants/components/Avatar.native.js

@@ -19,6 +19,68 @@ export default class Avatar extends Component {
         uri: React.PropTypes.string
     }
 
+    /**
+     * Initializes a new Avatar instance.
+     *
+     * @param {Object} props - The read-only React Component props with which
+     * the new instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        // Fork (in Facebook/React speak) the prop uri because Image will
+        // receive it through a source object. Additionally, other props may be
+        // forked as well.
+        this.componentWillReceiveProps(props);
+    }
+
+    /**
+     * Notifies this mounted React Component that it will receive new props.
+     * Forks (in Facebook/React speak) the prop {@code uri} because
+     * {@link Image} will receive it through a {@code source} object.
+     * Additionally, other props may be forked as well.
+     *
+     * @inheritdoc
+     * @param {Object} nextProps - The read-only React Component props that this
+     * instance will receive.
+     * @returns {void}
+     */
+    componentWillReceiveProps(nextProps) {
+        // uri
+        const prevURI = this.props && this.props.uri;
+        const nextURI = nextProps && nextProps.uri;
+        let nextState;
+
+        if (prevURI !== nextURI || !this.state) {
+            nextState = {
+                ...nextState,
+
+                /**
+                 * The source of the {@link Image} which is the actual
+                 * representation of this {@link Avatar}. As {@code Avatar}
+                 * accepts a single URI and {@code Image} deals with a set of
+                 * possibly multiple URIs, the state {@code source} was
+                 * explicitly introduced in order to reduce unnecessary renders.
+                 *
+                 * @type {{
+                 *     uri: string
+                 * }}
+                 */
+                source: {
+                    uri: nextURI
+                }
+            };
+        }
+
+        if (nextState) {
+            if (this.state) {
+                this.setState(nextState);
+            } else {
+                this.state = nextState;
+            }
+        }
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -30,7 +92,7 @@ export default class Avatar extends Component {
 
                 // XXX Avatar is expected to display the whole image.
                 resizeMode = 'contain'
-                source = {{ uri: this.props.uri }}
+                source = { this.state.source }
                 style = { this.props.style } />
         );
     }