Working on memoization

src/App.js

@@ -17,8 +17,8 @@ const App = () => {
       <Meta />
       <Reset />
       <TypographicGrid
-        displayVerticalRhytm={true}
-        displayHorizontalRhytm={true}
+        displayVerticalRhytm={false}
+        displayHorizontalRhytm={false}
       />
       <Router>
         <Switch>

src/components/LoadingData/LoadingData.js

@@ -40,13 +40,14 @@ const LoadingData = props => {
     <Section className="LoadingData" title="Loading Data" displayTitle={true}>
       <ul>
         <li>
-          <Link to="/loading-data/api-axios-placeholder-svg">
-            Loading data from an API with Axios using an SVG Placeholder
+          <Link to="/loading-data/api-axios">
+            Loading data from an API with Axios
           </Link>
         </li>
+
         <li>
-          <Link to="/loading-data/api-axios">
-            Loading data from an API with Axios
+          <Link to="/loading-data/api-axios-placeholder-svg">
+            Loading data from an API with Axios using an SVG Placeholder
           </Link>
         </li>
         <li>

src/components/LoadingDataApiAxios/LoadingDataApiAxios.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
@@ -42,6 +42,7 @@ const Article = styled(_Article)(props => ({
  * Generates a text placeholder for articles
  */
 const ArticlesPlaceholder = props => {
+  console.log("ArticlesPlaceholder");
   /**
    * Loads the placeholder
    */
@@ -72,11 +73,18 @@ const Articles = props => {
    */
   const { placeholder } = props;
 
+  /**
+   * Creates the placeholder
+   */
+  const articlesPlaceholder = useMemo(() => ArticlesPlaceholder(placeholder), [
+    placeholder
+  ]);
+
   /**
    * Loads the data
    */
   const { data } = useDataAPI(
-    ArticlesPlaceholder(placeholder),
+    articlesPlaceholder,
     "http://hn.algolia.com/api/v1/search?query=redux",
     "hits"
   );

src/components/Memoization/Memoization.stories.mdx

@@ -57,6 +57,61 @@ Memoizing them brings in the following results:
 
 It seems they all worth memoized in this context. However this feature needs more reasearch.
 
+## Caching functions
+
+By definition `useMemo(() => memoizedValue(a, b), [a, b])` :
+
+> Will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
+
+In other words:
+
+> useMemo allows you to memoize the results of a function, and will return that result until an array of dependencies change.
+
+Again one could ask: why don't wrap every function into a `useMemo()`? The answer is:
+
+> Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.
+
+In other words: just expensive calculations, no business logic. And hooks are business logic.
+
+### Example
+
+In the `LoadingDataApiAxios` component while the data is loading a placeholder is displayed:
+
+```
+/**
+ * Loads the data
+ */
+const { data } = useDataAPI(
+  ArticlesPlaceholder(placeholder),
+  "http://hn.algolia.com/api/v1/search?query=redux",
+  "hits"
+);
+```
+
+The `placeholder` prop is constant — is defined as a proptype and never gets touched. That makes the `ArticlesPlaceholder` function ideal to be wrapped into a `useMemo`:
+
+```
+/**
+ * Creates the placeholder
+ */
+const articlesPlaceholder = useMemo(() => ArticlesPlaceholder(placeholder), [
+  placeholder
+]);
+
+/**
+ * Loads the data
+ */
+const { data } = useDataAPI(
+  articlesPlaceholder,
+  "http://hn.algolia.com/api/v1/search?query=redux",
+  "hits"
+);
+```
+
+The number of re-renders before `useMemo` was three; now is a single one.
+
 ## Resources
 
 - [React v16.6.0: lazy, memo and contextType](https://reactjs.org/blog/2018/10/23/react-v-16-6.html)
+- [React: Optimize Components with React.memo, useMemo, and useCallback](https://headway.io/blog/react-optimize-components-memo-usememo-usecallback/)
+- [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html)

src/hooks/useData.js

@@ -105,8 +105,6 @@ const useLoadMore = (fetchMore, data, filter, variables) => {
  *
  */
 const useData = (defaultValues, query, filter, variables = {}) => {
-  console.log("useData");
-
   /**
    * Queries the database
    */

src/hooks/useDataAPI.js

@@ -28,8 +28,6 @@ import useDataApi from "use-data-api";
  * @link https://github.com/the-road-to-learn-react/react-hooks-introduction/tree/master/src/useDataApiHook-external-example
  */
 const useDataAPI = (defaultValues, query, filter) => {
-  console.log("useDataAPI");
-
   /**
    * Queries the database
    */