react-media-query-hoc - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

dist/media-query-provider.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _shallowequal = require('shallowequal');
+
+var _shallowequal2 = _interopRequireDefault(_shallowequal);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,3 +61,7 @@
       var media = _this.queryMedia(_this.props.queries, {});
-      _this.setState({ media: media });
+
+      // no need to set state when it hasnt changed
+      if (!(0, _shallowequal2.default)(media, _this.media)) {
+        _this.setState({ media: media });
+      }
     };
@@ -60,0 +68,0 @@

package.json

 {
   "name": "react-media-query-hoc",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A dead simple React Higher Order Component (HOC) that uses context for matching media queries",
@@ -72,4 +72,5 @@ "main": "dist/index.js",
     "matchmedia": "^0.1.2",
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "shallowequal": "^1.0.2"
   }
 }

src/media-query-provider.js

 import React from 'react';
 import matchMedia from 'matchmedia';
 import PropTypes from 'prop-types';
+import shallowequal from 'shallowequal';
 
@@ -52,3 +53,7 @@ const defaultQueries = {
     const media = this.queryMedia(this.props.queries, {});
-    this.setState({ media });
+
+    // no need to set state when it hasnt changed
+    if (!shallowequal(media, this.media)) {
+      this.setState({ media });
+    }
   }
@@ -55,0 +60,0 @@

test/integration.js

@@ -35,3 +35,3 @@ /* eslint-disable */
 
-  it('should render not render mobile view after client / server mismatch', () => {
+  it('should not render mobile view after client / server mismatch', () => {
     const values = {
@@ -38,0 +38,0 @@ width: 300,

test/media-query-provider.js

@@ -71,3 +71,3 @@ /* eslint-disable */
 
-  describe('when mobile matches', () => {
+  context('when mobile matches', () => {
     let mobileComponent;
@@ -124,3 +124,3 @@
 
-  describe('when rendering server-side', () => {
+  context('when rendering server-side', () => {
     it('should render', () => {
@@ -127,0 +127,0 @@ expect(() => {

No alert changes

Improved metrics

Total package byte prevSize

147254

increased by0.37%

Lines of code

478

increased by1.92%

Worsened metrics

Dependency count

5

increased by25%

Number of package files

16

decreased by-5.88%

Dependency changes

• + Addedshallowequal@^1.0.2

• + Addedshallowequal@1.1.0(transitive)