fix(displayname): add displayName before React.memo

Author: rolandszoke

.eslintrc.json

@@ -14,6 +14,7 @@
     "react/prefer-stateless-function": "off",
     "react/destructuring-assignment": "off",
     "react/state-in-constructor": "off",
+    "react/jsx-props-no-spreading": "off",
     "react/prop-types": "off"
   },
   "globals": {

examples/beer-finder/src/App.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import NavBar from "./NavBar";
-import BeerList from "./BeerList";
+import React from 'react';
+import NavBar from './NavBar';
+import BeerList from './BeerList';
 
 // if a component does not use any store, it doesn't have to be wrapped with view()
 // it is safer to wrap everything with view() until you get more comfortable with Easy State

examples/beer-finder/src/Beer.jsx

@@ -1,30 +1,42 @@
-import React from "react";
-import { view, store } from "react-easy-state";
-import Card from "@material-ui/core/Card";
-import CardMedia from "@material-ui/core/CardMedia";
-import CardContent from "@material-ui/core/CardContent";
+import React from 'react';
+import { view, store } from 'react-easy-state';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
 
 // this is re-rendered whenever the relevant parts of the used data stores change
-export default view(
-  ({ name, description, image_url: imageUrl, food_pairing: foodPairing }) => {
-    const beer = store({ details: false });
+const Beer = ({
+  name,
+  description,
+  image_url: imageUrl,
+  food_pairing: foodPairing,
+}) => {
+  const beer = store({ details: false });
 
-    return (
-      <Card onClick={() => (beer.details = !beer.details)} className="beer">
-        {!beer.details && <CardMedia image={imageUrl} className="media" />}
-        <CardContent>
-          <h3>{name}</h3>
-          {beer.details ? (
-            <p>{description}</p>
-          ) : (
-            <ul>
-              {foodPairing.map(food => (
-                <li key={food}>{food}</li>
-              ))}
-            </ul>
-          )}
-        </CardContent>
-      </Card>
-    );
-  }
-);
+  return (
+    <Card
+      onClick={() => {
+        beer.details = !beer.details;
+      }}
+      className="beer"
+    >
+      {!beer.details && (
+        <CardMedia image={imageUrl} className="media" />
+      )}
+      <CardContent>
+        <h3>{name}</h3>
+        {beer.details ? (
+          <p>{description}</p>
+        ) : (
+          <ul>
+            {foodPairing.map(food => (
+              <li key={food}>{food}</li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default view(Beer);

examples/beer-finder/src/BeerList.jsx

@@ -1,15 +1,17 @@
-import React from "react";
-import { view } from "react-easy-state";
-import appStore from "./appStore";
-import Beer from "./Beer";
+import React from 'react';
+import { view } from 'react-easy-state';
+import appStore from './appStore';
+import Beer from './Beer';
 
 // this is re-rendered whenever the relevant parts of the used data stores change
-export default view(() => (
+const BeerList = () => (
   <div className="beerlist">
     {!appStore.beers.length ? (
       <h3>No matching beers found!</h3>
     ) : (
       appStore.beers.map(beer => <Beer key={beer.name} {...beer} />)
     )}
   </div>
-));
+);
+
+export default view(BeerList);

examples/beer-finder/src/NavBar.jsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { view } from "react-easy-state";
-import SearchBar from "material-ui-search-bar";
-import LinearProgress from "@material-ui/core/LinearProgress";
-import appStore from "./appStore";
+import React from 'react';
+import { view } from 'react-easy-state';
+import SearchBar from 'material-ui-search-bar';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import appStore from './appStore';
 
 // this is re-rendered whenever the relevant parts of the used data stores change
-export default view(() => (
+const NavBar = () => (
   <div className="searchbar">
     <SearchBar
       onRequestSearch={appStore.fetchBeers}
@@ -14,4 +14,6 @@ export default view(() => (
     />
     {appStore.isLoading && <LinearProgress />}
   </div>
-));
+);
+
+export default view(NavBar);

src/view.js

@@ -42,7 +42,7 @@ export function view(Comp) {
 
   if (isStatelessComp && hasHooks) {
     // use a hook based reactive wrapper when we can
-    ReactiveComp = memo(props => {
+    ReactiveComp = props => {
       // use a dummy setState to update the component
       const [, setState] = useState();
       const triggerRender = useCallback(() => setState({}), []);
@@ -73,7 +73,9 @@ export function view(Comp) {
       } finally {
         isInsideFunctionComponent = false;
       }
-    });
+    };
+    ReactiveComp.displayName = Comp.displayName || Comp.name;
+    ReactiveComp = memo(ReactiveComp);
   } else {
     const BaseComp = isStatelessComp ? Component : Comp;
     // a HOC which overwrites render, shouldComponentUpdate and componentWillUnmount